1，配置文件.json
小程序的全局配置app.json和頁面配置page.json
每單頁頁面也有相應的.json文件，設置每個頁面中.json配置，會覆蓋與app.json相同的配置項。
如下：是一個包含了所有配置選項的簡單配置app.json
"pages": [//設置頁面的路徑
"pages/index/index", //不需要寫index.wxml,index.js,index,wxss,框架會自動尋找並整合
"pages/logs/logs"
],
"window": { //設置默認窗口的表現形式
"navigationBarBackgroundColor": "#ffffff",//頂部導航欄背景色
"navigationBarTextStyle": "black",//頂部導航文字的顏色 black/white
"navigationBarTitleText": "微信接口功能演示", //頂部導航的顯示文字
"backgroundColor": "#eeeeee", //窗口的背景色
"backgroundTextStyle": "light", //下拉背景字體、loading 圖的樣式，僅支持 dark/light
"enablePullDownRefresh":"false"，//是否支持下拉刷新 ，不支持的話就直接不寫！
"disableScroll":true,// 設置true不能上下滾動，true/false，注意！只能在page.json中有效，無法在app.json中設置該項。
},
"tabBar": { //底部tab或者頂部tab的表現，是個數組，最少配置2個，最多5個
"list": [{//設置tab的屬性，最少2個，最多5個
"pagePath": "pages/index/index",//點擊底部tab跳轉的路徑
"text": "首頁",//tab按鈕上的文字
"iconPath":"../img/a.png",//tab圖片的路徑
"selectedIconPath": "../img/a.png"//tab在當前頁，也就是選中狀態的路徑
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}] ，
"color":"red",//tab的字體顏色
"selectedColor":"#673ab7",//當前頁tab的顏色，也就是選中頁的
"backgroundColor":"#2196f3",//tab的背景色
"borderStyle":"white",//邊框的顏色 black/white
"position":"bottom"//tab處於窗口的位置 top/bottom
},
"networkTimeout": {//默認都是60000秒一分鍾
"request": 10000,//請求網絡超時時間10000秒
"downloadFile": 10000，//鏈接服務器超時時間10000秒
"uploadFile":"10000",//上傳圖片10000秒
"downloadFile":"10000"//下載圖片超時時間10000秒
},
"debug": true//項目上線后，建議關閉此項，或者不寫此項
}
2，邏輯層.js
小程序的邏輯層是js編寫，但因為小程序不是運動在瀏覽器中，所以js在web中的一些功能不能用，如document，windows等 。
app.js有全局的小程序生命周期，page.js有自己本頁面的生命周期
2.1 注冊小程序App.js
注意：
1,必須在app.js中注冊微信小程序，全局只有一個
2,不能再定app（）內的函數中調用getApp（），使用this就可以拿到app的實例。
3,不要在onLaunch的時候getCurrentPage（），此時page還沒有生成
4,通過其他子頁面調用getApp（）獲取實例后，不要私自調用小程序全局的生命周期方法
5,var app=getApp（）獲取小程序的實例
App ( {
// 小程序生命周期的各個階段
onLaunch: function(){},//當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
onShow: function(){},//當小程序啟動，或從后台進入前台顯示，會觸發 onShow
onHide: function(){},//當小程序從前台進入后台隱藏，會觸發 onHide
onError: function(){},//當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息
// 自定義函數或者屬性，用 this可以訪問
...
})
2.2 注冊小程序的頁面page.js
Page()用來注冊一個頁面，維護該頁面的生命周期以及數據。
Page({ data: {//頁面的初始數據//調用：<view>{{text}}</view> <view>{{array[0].msg}}</view> text: 'init data', array: [{msg: '1'}, {msg: '2'}] }, // 頁面生命周期的各個階段 onLoad: function(){},//生命周期函數--監聽頁面加載 onShow: function(){},//生命周期函數--監聽頁面初次渲染完成 onReady: function(){},//生命周期函數--監聽頁面顯示 onHide: function(){},//生命周期函數--監聽頁面隱藏 onUnload: function(){},//生命周期函數--監聽頁面卸載 onPullDownRefresh: function(){},//頁面相關事件處理函數--監聽用戶下拉動作,需要 在app.json中配置 "enablePullDownRefresh":"true" 允許上拉刷新 onReachBottom: function(){},//頁面上拉觸底事件的處理函數 onShareAppMessage: function(){//用戶點擊右上角分享 return { title: '自定義分享標題', desc: '自定義分享描述', path: '/page/user?id=123' } }, // 自定義函數或者屬性如： customData: { hi: 'MINA' } ... })
2.3，注意事項
setData（）
不能直接數據 ，this.data.text="xxxxx" //這是錯誤的，
this.setData ({ //在這里面修改數據的值，和react的setdata有些類似})//這是正確的
這里記住this有作用域的問題 ，如在局部函數中使用需.bind(this),或其他
getApp（）
如果需要全局的數據可以在app.js中設置。如：
App({// app.js
globalData: 1
})
// 某page.js
console.log(getApp().globalData)
2.4，公共模塊util.js
公共模塊方法需要通過module.exports對外暴露接口。
使用的時候需要require(path)將文件引入。如：
function sayHello(name) {//公共方法util類
console.log(`Hello ${name} !`)
}
module.exports.sayHello = sayHello//用module.exports 對外暴露接口
//先引入文件，是新建的一個utils包，公共方法在util.js里面
var util = require('../../utils/util.js')
Page({//調用類
onLoad: function () {// 使用時，用util引用名調用，如：util.sayHello（）
util.sayHello('我是傳的值');
}
})
3，視圖層WXML
視圖層的數據綁定 均來自於Page中的data，修改值則是this.setData
數據綁定使用{{變量}}雙大括號將變量包起來
**條件渲染** <view wx:if="{{zhenjiaa=='123'}}">123334</view> <view wx:if="{{zhanjia}}">123334</view> <view wx:if="{{len > 5}}">大於5我就顯示了 </view> //這是一個if if else的判斷 <view wx:if="{{length > 5}}"> 1 </view>//如果大於5顯示1 <view wx:elif="{{length > 2}}"> 2 </view>//否則如果大於2顯示2 <view wx:else> 3 </view>//否則顯示3 <block wx:if="{{true}}">//block只是一個包裝元素，並不會在頁面上做任何渲染，只受屬性控制。 <view> view1 </view> <view> view2 </view> </block> wx:if vs hidden wx:if 是惰性的，運行時不渲染， 《hidden 組件始終渲染，只是簡單的顯示隱藏，如果需要頻繁切換則用hidden》 **列表渲染** view wx:for="{{array}}"> {{index}}:{{item}} </view>//默認index是當前下標的變量名，數組當前項是item，如果是object類型則是item.xxx 也可以另取名用wx：for-index=“xx”來指定當前數組下標的變量名 wx：for-item="xx" 來指定當前元素的變量名 //輸出的結果是0:1,1:2,2:3,3:4,4:5 page.jsPage({ data: { array: [1, 2, 3, 4, 5] }}) block wx:for 類似block wx:if，也可以將wx:for用在<block/>標簽上 **wx：kay ** 如果列表中的項需要動態添加到列表中，並希望項目保持原有的特征和狀態使用wx:kay wx:kay 有兩種形式提供 1，字符串 wx:kay=“unique” 2，保留關鍵字 wx:kay="*this" **算法運算** <view> {{a + b}} + {{c}} + d </view> **字符串運算** <view>{{"hello" + name}}</view> 也可以用擴展運算符 ... 來將一個對象展開 {{...obj1}} //a:1,b:2 可以把obj對象完全展開 obj1: { a: 1, b: 2 }, 注意：上述方式可以隨意組合，但是如有存在變量名相同的情況，后邊的會覆蓋前面
.1，wxml模版的使用
name定義組件模版的名稱，引用模版的時候使用is屬性指定模版的名字，is可以進行簡單的三木運算。需要傳入模版需要的data數據。因為模版擁有自己的作用域，所以只能使用data傳入數據，而不能直接{{}}使用。
<template name="msgItem">// 某個模板 <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template> ---------------------------------- 使用時： <template is="msgItem" data="{{...item}}"/>//data里面需要傳入name為msgItem 模板中所需要的值
3.2，WXML公共模塊的引用
WXML提供兩種文件引用方式1，import 。 2，include
如下:
import有作用域的概念，不可以A import C,可以A import B, <!-- B.wxml --> <import src="a.wxml"/>//使用import標簽 <!-- A.wxml --> <template name="A"> <text> A template </text> </template>
include可以多重引用 <include src="header.wxml"/>//引用header、其中header.wxml中也引用了footer.wxml <view> body </view> <!-- header.wxml --> <view> header </view> <include src="footer.wxml"/>
3.2，事件
1， bind開頭不阻止冒泡，用catch開頭可以阻止冒泡。如catchtap～冒泡的定義：點擊子組件會觸發父組件，所有父組件，先子后父的觸發
2，無特殊情況自帶事件的各個事件對象以及對象屬性列表
3，dataset，在wxml組件中可以定義data數據，會通過事件傳遞。以data-開頭，多個單詞以為-鏈接，如data-a-b，但是不能有大寫，它會自動轉成駝峰命名，調取的時候去駝峰命名的名字。
4， wxss
用法類似於css，擴展尺寸單位和樣式導入
1，尺寸單位rpx，1rpx=0.5px。
2，樣式導入。以逗號結束。
@import "common.wxss";//引入的時候import后面跟引入文件的相對路徑
可以使用內聯樣式，但不建議，會影響渲染速度。
page.wxss的樣式會覆蓋全局樣式app.wxss
5，組件
1，所有組件和屬性都是小寫，以-連接
2，image默認寬300px高度225px
3，~~和html類似（巴拉巴拉）
**navigator相當於a標簽** <navigator url="../index/index">點擊跳轉不關閉當前頁面</navigator> <navigator url="../logs/logs" redirect="true" >點擊跳轉關閉當前頁面</navigator>