結(jié)構(gòu)
主體app
- app.json小程序配置
- app.js小程序業(yè)務(wù)邏輯（屬性和方法可以被其他頁(yè)面訪問(wèn)）
- pages 頁(yè)面配置（在最前面的默認(rèn)頁(yè)面）
- window窗口配置
"navigationBarBackgroundColor": "#f30", //導(dǎo)航欄顏色
"navigationBarTitleText": "WX", //導(dǎo)航欄標(biāo)題
"navigationBarTextStyle": "white" //導(dǎo)航欄文字顏色（black，white）
- app.wxss公用樣式
頁(yè)面pages
index首頁(yè)
- index.json首頁(yè)配置（app.json里面的window一致）
- index.js 首頁(yè)的業(yè)務(wù)邏輯
- index.wxml 首頁(yè)的模板與布局
- index.wxss 首頁(yè)的css
log 日志
標(biāo)簽組件
view 塊
text文本
wxss
語(yǔ)法和web的css基本兼容
rpx 750rpx等于一個(gè)屏幕的寬
模板語(yǔ)法
- 文本{{ }}
- 條件渲染
<view wx:if="{{表達(dá)式}}">
<view wx:else>
<view wx:elif="{{表達(dá)式}}">
- 列表渲染
<view wx:for="{{list}}" wx:for-index="myindex" wx:for-item="myItem">
{{myindex}}: {{myItem}}
</view>
<view wx:for="{{list}}">{{item}}</view>
- 模板
template
定義
<template name="temp">
<view>標(biāo)題:{{name}}</view>
</template>
調(diào)用
<template is="temp" {{name:"yaya"}}>
導(dǎo)入模板
<import src="xxx.wxml"/>
非template
任意wxml文件
導(dǎo)入模板
<import src="xxx.wxml"/>
//相當(dāng)于把xxx.wxm文件內(nèi)容（除了template）拷貝到include 地方
- 事件
類型
bindTap 單擊
bindInput 表單發(fā)生改變
事件參數(shù)
<view bindtap="showMsg" data-msg="你好我是小陳">
showMsg(e){
// e.target.dataset.msg 獲取的事件參數(shù)
},
表單
<input value="{{msg}}" bindinput="inputHd"></input>
inputHd(){
// e.detail.value 表單值
},
更新數(shù)據(jù)與視圖
this.setData({數(shù)據(jù)名1: 數(shù)據(jù)值1,})
導(dǎo)航
標(biāo)簽<navigator>
- open-type 打開(kāi)頁(yè)面類型
navigator //默認(rèn)打開(kāi)
redirect //不留歷史記錄
switchTab //切換底部欄
navigateBack //返回
- 打開(kāi)小程序
app.json配置
"navigateToMiniProgramAppIdList": ["wxb8f91a4e8d7eb4ae"],
"style": "v2",
navigator
<navigator
target="miniProgram"
open-type="navigate"
app-id="wxb8f91a4e8d7eb4ae"
path="要打開(kāi)的頁(yè)面（默認(rèn)首頁(yè)）"
>面試寶典</navigator>
js方式
wx.navigateTo({url: ' ', })
//跳轉(zhuǎn)頁(yè)面
wx.redirectTo({ url;" " })
//跳轉(zhuǎn)不留歷史記錄
wx.switchTab({ url:" "})
//底部欄頁(yè)面切換
wx.navigateBack( )
//返回
wx.navigateToMiniProgram({ appld:"appld" })
//切換小程序
生命周期
- onLoad
頁(yè)面的參數(shù)
ajax請(qǐng)求通知在這個(gè)函數(shù)調(diào)用 - onShow
頁(yè)面顯示 - onReady
頁(yè)面首次渲染 - onHide
switchTab，切換底部欄navigate跳轉(zhuǎn)頁(yè)面 - onUnload
卸載
redirect 時(shí)候 當(dāng)前頁(yè)面就會(huì)被卸載 - onPullDownRefresh 下拉刷新
- onReachBottom觸底
- onShareAppMessage分享
小程序特點(diǎn)
dom限制
- 小程序沒(méi)有window對(duì)象，更沒(méi)有document沒(méi)辦法用jq類似的庫(kù)操作dom
- 小程序不能直接打開(kāi)網(wǎng)頁(yè)
- 背景圖片最好用網(wǎng)絡(luò)圖片
數(shù)量限制
- 底部欄最少2最多5個(gè)
- 頁(yè)面的歷史記錄最多打開(kāi)5層
- request同時(shí)最多5個(gè)請(qǐng)求
大小限制
- 小程序包最多1M -2M通過(guò)分包16M
- setData 1M
- setStorage最多10M
- tabbar底部欄圖片必須是本地的，最大40k最好81px
