快速上手微信小程序-快遞100

2007 年 1 月 9 日，喬布斯在舊金山莫斯科尼會展中心發布了首款 iPhone，而在十年后的 1 月 9 日，微信小程序正式上線。張小龍以這樣的形式，向喬布斯致敬。

小程序在哪里？

小程序功能模塊在“發現”頻道最下方的位置。
如果沒有，請先將微信升級到最新版本，然后在通訊錄搜索‘小程序示例’，點擊之后返回“發現頻道”即可。
Tip：小程序搜索目前不支持模糊查詢

小程序會帶來什么

無處不在，隨時訪問

移動互聯網的下一站是“唾手可得”
——張小龍

切入正題：怎么開發？

1. 獲取微信小程序的 AppID
登錄 https://mp.weixin.qq.com，就可以在網站的“設置”-“開發者設置”中，查看到微信小程序的 AppID 了，注意不可直接使用服務號或訂閱號的 AppID 。

2. 下載開發者工具
下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715

新建項目

只是嘗試一把，可以選擇游客模式，無需填寫AppId

小程序 IDE-編輯

小程序 IDE-調試

界面類似於chrome瀏覽器調試界面

項目結構

App.js 是全局腳本文件
App.json 是全局配置文件
App.wxss 是全局樣式
Pages 中為頁面

 

創建頁面

在小程序IDE中，配置文件保存的同時，pages中會自動創建頁面文件夾，文件夾中包含以下四種文件：
order.js order.json order.wxml order.wxss

邏輯層(App Service)

1.小程序開發框架的邏輯層是由JavaScript編寫。
2.邏輯層將數據進行處理后發送給視圖層，同時接受視圖層的事件反饋（數據單向綁定，vue是雙向綁定，小程序沒有vm層）。
每個頁面有獨立的作用域，並提供模塊化能力。
3.由於框架並非運行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用，如 document，window 等。
4.開發者寫的所有代碼最終將會打包成一份 JavaScript，並在小程序啟動的時候運行，直到小程序銷毀。類似 ServiceWorker，所以邏輯層也稱之為 App Service。

App( ) 

App( ) 函數接受的 object 參數

 

getApp( )

全局的getApp( )函數，可以獲取到小程序實例。

Page()

Page()函數用來注冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命周期函數、事件處理函數等。

setData()

setData()函數用於將數據從邏輯層發送到視圖層，同時改變對應的this.data

坑：直接修改 this.data 無效，無法改變頁面的狀態，還會造成數據不一致

模塊化

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },})

WXSS（WeiXin Style Sheets）

就是微信小程序的css，新增了尺寸單位rpx：

 rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

組件

小程序中沒有a標簽，頁面跳轉需要用navigator組件

Navigator 頁面鏈接 <navigator url="url">跳轉</navigator>

其他組件

媒體組件，地圖，畫布，在此不一一贅述，請大家查看小程序API

https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=201715

最后附上快遞查詢功能代碼，調用快遞100物流查詢公共接口

index.wxml

<!--index.wxml-->
<view class="container">
  <view bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">歡迎您，{{userInfo.nickName}}</text>
  </view>
  <view class="section">
    <input placeholder-style="color:white" class="order-input" placeholder="請輸入訂單號" bindchange="bindChange" id="orderId" />
    <input placeholder-style="color:white" class="order-input" placeholder="請輸入快遞公司" bindchange="bindChange" id="company" />
  </view>
  <text>{{errTip}}</text>
  <button class="query-btn" type="default" size="{{primarySize}}" loading="" plain="true" disabled="{{disabled}}" bindtap="query"> 查詢 </button>
</view>

 

index.js

小程序只支持https的請求

var app = getApp()
// var inputCon = {}
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    inputCon: {},
    errTip: ''
  },
  //事件處理函數
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  bindChange: function (e) {
    var id;
    var value;
    id = e.target.id;
    value = e.detail.value + '';
    this.data.inputCon[id] = value;
  },
  // query
  query: function () {
    // 測試用例
    // 417941822755 zhongtong
    // 884044987614211278 yuantong
    var that = this;
    var type = that.data.inputCon.company;
    var postid = that.data.inputCon.orderId;
    var data = {
      'type':type,
      'postid':postid
    }
    app.globalData.queryInfo.push(data);
    console.log(app)

    wx.request({
      url: 'https://www.kuaidi100.com/query',
      data: data,
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        var errTip = res.data.message;
        var orderInfo = res.data.data;
        if(orderInfo.length == 0) {

          console.log(errTip)
          that.setData({
            errTip:errTip
          })
          return
        }
        that.setData({
            errTip:''
          })
        app.globalData.orderInfo = orderInfo;
        wx.navigateTo({
          url: '../order/order'
        })
      }
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //調用應用實例的方法獲取全局數據
    app.getUserInfo(function (userInfo) {
      //更新數據
      that.setData({
        userInfo: userInfo
      })
    })
  }
})

訂單物流頁面

order.wxml

<!--pages/order/order.wxml-->
<view class="order-list">
  <block wx:for="{{orders}}">
    <view class="order-time"> {{item.ftime}}: </view>
    <view class = "order-txt"> {{item.context}} </view>
  </block>
</view>

order.js

// pages/order/order.js
var app = getApp();
Page({
  data:{
    orders:[]
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的參數
    var orderInfo = app.globalData.orderInfo;
    this.setData({
      orders: orderInfo
    })
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  }
})

總結

小程序的視圖層與vue相似，用過vue的同學應該很容易上手，小程序對常用組件方法封裝能滿足基本需求，但目前還有一些bug，官網上也有標注。無論如何，小程序的出現無疑讓前端的地位更上一層樓！