5分鐘看懂微信小程序

首先

上圖

當接觸一個新事物的時候 先不要看文檔 看說明書 自己去大概觀察一下 什麼結構 什麼特點 跟自己之前接觸的有什麼異曲同工之處 

看圖吧 結構還是很簡單的  創建出來一個單個頁面的小程序就是這樣子

兩個文件夾和四個文件 

1>>> 第一個文件夾 pages 

pages 里是小程序的所有頁面 每一個頁面作為一個文件夾 至少包含三個文件 demo.wxml demo.wxss demo.js  其實就是一個 HTML 一個 CSS 一個 JS 文件  wxml 負責頁面的構建 wxss 負責樣式的配置  js 就是負責頁面的交互

在每個 JS 文件里 都有一個 Page()方法 這類似一個構造函數 接受一個 object 對象 例如 Page({data:{},clickAction:function(){}}) 當然你可以這樣寫 var obj&＃61;{} Page(obj)也可以創建一個頁面

wxml wxss 不用多說 當然你可以用 style&＃61;&＃39;&＃39;直接把樣式寫在組件內部  {{xxx}}取的是 js文件里 data:{}裡的值

***

并不是一個組件 它僅僅是一個包裝元素,不會再頁面中做任何渲染,只接受控制屬性

如果要一次性判断多个组件标签&＃xff0c;可以使用一个  标签将多个组件包装起来&＃xff0c;并在上边使用 wx:if 控制属性。

wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定&＃xff0c;所有当 wx:if 的条件值切换时&＃xff0c;框架有一个局部渲染的过程&＃xff0c;因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的&＃xff0c;如果在初始渲染条件为 false&＃xff0c;框架什么也不做&＃xff0c;在条件第一次变成真的时候才开始局部渲染。

相比之下&＃xff0c;hidden 就简单的多&＃xff0c;组件始终会被渲染&＃xff0c;只是简单的控制显示与隐藏。

一般来说&＃xff0c;wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此&＃xff0c;如果需要频繁切换的情景下&＃xff0c;用 hidden 更好&＃xff0c;如果在运行时条件不大可能改变则 wx:if 较好。

2>>>utils 就是工具類了 xxx.js 等等

3>>>app.js

包含

App({onLaunch: function(options) {// Do something initial when launch.},onShow: function(options) { // Do something when show. }, onHide: function() { // Do something when hide. }, onError: function(msg) { console.log(msg) }, globalData: &＃39;I am global data&＃39; })生命週期函數和全局變量

APP()函數只能寫在這裡 且只能註冊一次
在 app.js 里通過 this 就可以取得 app實例 在其他文件里可以通過 getApp()獲取 app實例
不要在 onLaunch 的时候调用 getCurrentPages()&＃xff0c;此时 page 还没有生成。
通过 getApp() 获取实例之后&＃xff0c;不要私自调用生命周期函数。

4>>>app.json文件用来对微信小程序进行全局配置&＃xff0c;决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
以下是一个包含了所有配置选项的 app.json &＃xff1a;

{"pages": ["pages/index/index", // 第一個頁面"pages/logs/index"],"window": {"navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true }
app.wxss 公共樣式
project.config.json 項目配置文件

>>> 關於小程序的條件語句有點奇葩
比如下面一個99乘法表 是這麼寫的

其中 arr在 data中為[1,2,3,4,5,6,7,8,9]
拿 for 循環來說 wx:for&＃61;&＃39;{{}}&＃39; 代表循環數組 如果在一個組件中就創建這麼多次組件默認 index 就是第 index 項 ,item 為arr[index] 但是可以通過 wx:for-index&＃61;"idx" wx:for-item&＃61;&＃39;itemName&＃39; 自行為他命名
這樣就可以這樣顯示{{idx}} {{itemName}}/{{itemName.xxx}}
需要注意的是 wx:for&＃61;&＃39;array&＃39;可以把一個字符串當做數組循環
"{{[&＃39;1&＃39;,&＃39;2&＃39;,&＃39;3&＃39;]}} "如果花括號與引號之間有空格會被解析成空格 等同"{{[&＃39;1&＃39;,&＃39;2&＃39;,&＃39;3&＃39;]&＃43;&＃39;&＃39;}}"


<view wx:if&＃61;"{{length > 5}}"> 1 view> <view wx:elif&＃61;"{{length > 2}}"> 2 view> <view wx:else> 3 view>
通過 if else 控制視圖的顯示

***小程序還支持模板 template***

<template name&＃61;"msgItem">

<view> <text> {{index}}: {{msg}} text> <text> Time: {{time}} text> view> template>
使用: