微信小程序開發

優點
  • 無需安裝。
  • 隨處可見，隨處使用。
  • 使用完，無需寫在卸載。
小程序的申請地址。

https://mp.weixin.qq.com

安裝微信小程序工具

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

小程序的目錄結構

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

頁面的覆蓋掉全局的配置

新建頁面的步驟
  • 在pages目錄下，右鍵新建目錄，在當前新建的目錄下，新建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全局只會觸發一次。

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

Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },

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

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

  },

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

    console.log("onShow")

  },

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

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

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

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  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

數據綁定
  • mustache語法：{{}}
  • 單向數據綁定
動態數據綁定
  • 小程序的賦值通過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}}">優秀</view>
<view wx:else>良好</view>
<view wx:if = "{{score != ''}}">不為空</view>
小程序的列表渲染

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

  • wx:for 綁定數組，wx:for-item值為當前變量名 ，wx:for-index當前下標的變量名。
<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中寫對應的方法
<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")
  },
小程序事件機制 catch和bind
  • bind 會用到冒泡的機制，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>

捕獲事件先于綁定事件。從外層到內層捕獲，從內層到外層綁定。

小程序的基礎組件和常用組件

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 >
小程序頁面導航組件

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

小程序常用路由跳轉
  • wx.navigateTo：保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。小程序中頁面棧最多十層。
  • wx.switchTab：跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面
  • wx.reLaunch：關閉所有頁面，打開到應用內的某個頁面
  • wx.navigateBack： 關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages 獲取當前的頁面棧，決定需要返回幾層。
  • wx.redirectTo：關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面。
<view bindtap = "tapNext"> 跳轉到2級頁面</view>

 tapNext:function(){
    wx.redirectTo({
      url: '/pages/sort/sort',
      success:function(e){
        console.log(e)
      }
    })
  },
小程序的頁面傳參和取參。
<navigator url="/pages/sort/sort?id=1&name=aaaa"> 小程序的傳遞參數</navigator>

onLoad: function (options) {
    console.log(options)
  },
小程序的底部導航欄

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
// 創建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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容