結(jié)構(gòu)

主體 app

• app.json
  小程序配置

• app.js
  小程序業(yè)務(wù)邏輯
  (屬性和方法可以被其他頁(yè)面訪問)

  • pages
    頁(yè)面配置
    (在最前面的是默認(rèn)頁(yè)面)
  • window
    窗口頁(yè)面配置

  "navigationBarBackgroundColor": "#61bfad",
  "navigationBarTitleText": "WeChat",
  "navigationBarTextStyle": "white"
  導(dǎo)航欄顏色, 導(dǎo)航欄標(biāo)題,導(dǎo)航欄文字顏色(white/black)
  

  • app.wxss
    公用樣式

頁(yè)面 pages

• index
  首頁(yè)

  • index.json
    首頁(yè)配置
    (app.json里面的window一致)
  • index.js
    首頁(yè)的業(yè)務(wù)邏輯
  • index.html
    首頁(yè)的模板與布局
  • index.wxss
    首頁(yè)的css

• log
  日志

標(biāo)簽組件

• view 塊

• text 文本

wxss

• 語(yǔ)法和web的css基本兼容

• rpx 750rpx 等于一個(gè)屏幕的寬

模板語(yǔ)法

文本

• {{}}

條件渲染

<view wx:if="{{表達(dá)式}}">內(nèi)容</view>
<view wx:elif="{{表達(dá)式}}">內(nèi)容</view>
<view wx:else>請(qǐng)登錄</view>

列表渲染

<view wx:for="{{list}}" wx:key="{{index}}">{{index}}-{{item}}</view>
<text  wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myindex"> {{myindex}}.{{myitem}}</text>

模板

• template

• 定義

<template name="temp>
<view>標(biāo)題:{{name}}</view>
</template>

• 調(diào)用

<template is="temp" {{name:"abc"}}></template>

• 導(dǎo)入模板

<import src="xxx.wxml" />

• 非template

  • 任意的wxml文件
  • 導(dǎo)入

<include src="xxx.html" />
相當(dāng)于把xxx.wxml文件內(nèi)容(除了template)拷貝到include

事件

• 類型

  • bindtap 單擊
  • bindinput 表單發(fā)生改變

• 事件參數(shù)

<view bindtap="showMsg" data-msg="HI msg"></view>
showMsg(e){
  e.target.dataset.msg 
  //獲取事件參數(shù)
}

表單

<input value="{{msg}}" bindinput="inputHd"></input>
- inputHd(e){
//表單值
e.detail.value
}

更新數(shù)據(jù)與視圖

• this.setData({數(shù)據(jù)名:數(shù)據(jù)值})

導(dǎo)航

標(biāo)簽

<navigator></navigator>

• open-type
  打開頁(yè)面類型

navigate  // 默認(rèn)打開
redirect   // 不留歷史記錄
switchTab   // 切換底部欄
navigateBack // 返回

• 打開小程序

• 1.app.json配置

"navigateToMiniProgramAppIdList": ["小程序appid"],
  "style": "v2",

• 2.navigator

<navigator 
target="miniProgram" 
open-type="navigate"
app-id="小程序的appid" 
path="要打開的頁(yè)面(默認(rèn)首頁(yè))">
面試寶典
</navigator>

js方式

• 跳轉(zhuǎn)頁(yè)面

wx.navigateTo({
url:" ",
})

• 跳轉(zhuǎn)不留歷史記錄

wx.redirectTo({
url:" ",
})

• 底部欄頁(yè)面切換

wx.switchTab({
url:"",
})

• 返回

wx.navigateBack( );

• 切換小程序

wx.navigateToMiniProgram({
appid:"appid"
})

生命周期

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)擊分享

小程序特點(diǎn)

dom限制

• 小程序沒有window對(duì)象,更沒有document,沒辦法用jq類似的庫(kù)操作dom
• 小程序不能直接打開網(wǎng)頁(yè)
• 背景圖片最好用網(wǎng)絡(luò)圖片

數(shù)量限制

• 1). 底部欄(最少2最多5)
• 2). 頁(yè)面的歷史記錄最多可打開5層
• 3). request 同時(shí)最多5個(gè)請(qǐng)求

大小限制

• 小程序包 最多1M-2M 通過分包16M
• setData 1M
• setStorage 最多10M
• tabbar 底部欄圖片,必須是本地的,最大40k,最好81px