優(yōu)點

• 無需安裝。
• 隨處可見，隨處使用。
• 使用完，無需寫在卸載。

小程序的申請地址。

https://mp.weixin.qq.com

安裝微信小程序工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

小程序的目錄結(jié)構(gòu)

app.js（小程序的主要邏輯）
app.json （小程序全局的公共配置）
app.wxss （小程序全局的公共樣式表）

頁面的覆蓋掉全局的配置

新建頁面的步驟

• 在pages目錄下，右鍵新建目錄，在當(dāng)前新建的目錄下，新建page框架。
• 在app.json的pages選項中添加新建頁面的路徑。

小程序的生命周期，以及頁面的生命周期

*小程序生命周期：
https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

onLaunch全局只會觸發(fā)一次。

*頁面生命周期：
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    console.log("onload")
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
    console.log("onReady")

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {

    console.log("onShow")

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
    onsole.log("onHide")
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {
    onsole.log("onUnload")
  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

onLoad，onReady 只會渲染一次。

小程序的尺寸單位：“rpx”

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

flex 布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

數(shù)據(jù)綁定

• mustache語法：{{}}
• 單向數(shù)據(jù)綁定

動態(tài)數(shù)據(jù)綁定

• 小程序的賦值通過this.setData(對象)

var apiData  = {
      textStr:"sever data",
      name:"jack"
    };
    
    this.setData(apiData);
    

• 獲取data的值
  this.data.key 值

小程序的條件渲染

wx:if為true顯示元素，為false就不顯示元素。

<view style="text-align: center">考試成績</view>
<view>{{score}}</view>
<view wx:if = "{{score>60}}"> 及格</view>
<view wx:elif="{{score>90}}">優(yōu)秀</view>
<view wx:else>良好</view>
<view wx:if = "{{score != ''}}">不為空</view>

小程序的列表渲染

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

• wx:for 綁定數(shù)組，wx:for-item值為當(dāng)前變量名 ，wx:for-index當(dāng)前下標(biāo)的變量名。

<block wx:for = "{{apiData}}" wx:for-item = "item">
<view class="item">
    <view class="item_image">
    <image src ="{{item.url}}" ></image>
    </view>
    <view class = "item_name"
  >{{item.name}}
  </view>
    </view>
    

</block>

小程序事件綁定和事件交互

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

• bind+事件方法
• 需要在js中寫對應(yīng)的方法

<view>
  {{changeText}}
</view>
<button bindtap="changetext" bindlongtap="longtap">
  改變文字
</button>
--------------------------
data: {
      // textStr:"hello word11 "
    // score:90
    datalist:[],
    changeText:"hello  hundun"
  },
  changetext:function(){
    // console.log(1)
    this.setData({
      changeText:" ni hao ya "
    })
  },
  longtap:function(){
    console.log("longtap")
  },

小程序事件機(jī)制 catch和bind

• bind 會用到冒泡的機(jī)制，catch會阻止事件的冒泡。
• 捕獲階段的bind 和catch

<view class="container" bindtap="containertap">
      <text class="text" catchtap="texttap">點擊</text>
</view>

capture-bind:tap(捕獲事件)
capture-catch:tap（捕獲事件）

<view class="container" bindtap="containertap" capture-bind:tap = "captruecontainer">
  <text class="text"  bindtap="texttap" capture-bind:tap = "captruetext">點擊</text>

</view>

捕獲事件先于綁定事件。從外層到內(nèi)層捕獲，從內(nèi)層到外層綁定。

小程序的基礎(chǔ)組件和常用組件

https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

• icon
• progress
• rich-text
• text

 <icon type = "search" size = "200" color = "red"></icon>
  <progress percent="50" show-info ="false" stroke-width = "20"
  
  active = "true"> </progress>

  <text selectable="true">hahha </text>

  <rich-text nodes = "{{textrich}}" ></rich-text>

小程序的表單組件

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

• input
• checkbox
• checkbox-group
• button
• form

<form bindsubmit="bindsubmitform" bindreset="bindrestform">
<input name  ="input" placeholder="請輸入" bindinput="inputfuc">

</input>

<button  name  = "button" type="warn" plain="false" loading="false"> 按鈕</button>


<view>
  <checkbox-group name = "checkbox-group" bindchange = "onchangecheck">
    <label>
      <checkbox value="java">
        java
      </checkbox>
    </label>

    <label>
      <checkbox value="c++">
        c++
      </checkbox>
    </label>

    <label>
      <checkbox value="c">
        c
      </checkbox>
    </label>
  </checkbox-group>
</view>
<button form-type="submit"> 提交 </button>
<button form-type="reset">重置 </button>

</form>

畫布

https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

swiper

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

<swiper indicator-dots="{{indicator}}"  autoplay="{{autoplay}}" previous-margin ="{{previous}}">
  <block wx:for="{{imagesss}}" wx:key ="*this">
    <swiper-item>
    <image src="{{item}}" class = "swiper-item"></image>
      </swiper-item>
  </block>

</swiper>

特殊的覆蓋組件

https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

<map>
    <cover-view class="coverdata">
    hhhh
    </cover-view>
</map >

小程序頁面導(dǎo)航組件

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
<navigator url = "/pages/sort/sort" hover-class="navigator-hover" open-type="reLaunch"> 跳轉(zhuǎn)到分類頁面</navigator>

小程序常用路由跳轉(zhuǎn)

• wx.navigateTo：保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。小程序中頁面棧最多十層。
• wx.switchTab：跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面
• wx.reLaunch：關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面
• wx.navigateBack： 關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages 獲取當(dāng)前的頁面棧，決定需要返回幾層。
• wx.redirectTo：關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面。

<view bindtap = "tapNext"> 跳轉(zhuǎn)到2級頁面</view>

 tapNext:function(){
    wx.redirectTo({
      url: '/pages/sort/sort',
      success:function(e){
        console.log(e)
      }
    })
  },

小程序的頁面?zhèn)鲄⒑腿ⅰ?/h5>

<navigator url="/pages/sort/sort?id=1&name=aaaa"> 小程序的傳遞參數(shù)</navigator>

onLoad: function (options) {
    console.log(options)
  },

小程序的底部導(dǎo)航欄

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html

app.json
"tabBar": {
    "color": "#000",
    "sselectedColor":"#0f0",
    "borderStyle":"black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁",
      
    },{
      "pagePath": "pages/sort/sort",
      "text": "分類"
    }]
  }

利用require加載js文件

var formate = require("../../utils/util.js")

onLoad:function(options){
var  date  = new  Date()
    console.log(date)

    var d = formate.formatTime(date)
    console.log(d)
    }

WXML的模版編寫和引入

wxs模塊引用。

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html
// 創(chuàng)建wxs文件。

var textStr = "hello world"

var num  =  function(num1,num2){
  return num1+num2;
}

module.exports = {
  message:textStr,
  add:num
}
//引入wxs

<wxs module = "test" src = "../../wxs/util.wxs">
</wxs>
<view>{{test.message}}</view>


<view>{{test.add(1,11)}}</view>