微信小程序初體驗

時間 2019-12-18

標籤微信程序體驗简体版

原文原文鏈接

小程序最近太火，不過相比較剛發佈時，已經有點熱度散去的感受，不過這不影響咱們對小程序的熱情，開發以前建議通讀下官網文檔，附連接：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=201716css

接下來，咱們要實現的小程序效果以下，源碼地址：https://github.com/caiya/weapp-ywgo：html

一、註冊

打開微信公衆平臺，單擊「小程序」，按步驟開始註冊便可，附地址：https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CNvue

這裏要注意的就是，小程序目前我的開發者沒法單獨註冊，須要進行企業等資格認證，不過認證那裏咱們隨意填寫，認證通不經過並不影響咱們開發，只是不能正式發佈而已。css3

二、初始化項目

註冊成功後，進入後臺，有個appid、密鑰，這兩個添加到這裏，最後點擊肯定便可：git

三、項目結構

來看下wx自動生成的項目結構：es6

其中，pages用來放小程序中的各個頁面，這些頁面必須在app.json文件的pages參數中進行配置，static是咱們自定義的用來存放靜態文件的目錄，好比一些image、style等，utils是工具文件夾，放置一些公共類方法，好比request請求封裝、時間處理等，下面來主要介紹一下幾個文件：github

app.js or page.js：app.js是全局的小程序類，page.js是各個頁面層級的類，app.js的代碼格式以下：

//app.js

const utils = require('./utils/util.js')

App({
  onLaunch: function () {

  },
  getUserInfo(cb) {
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //調用登陸接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  getNewsInfo(typeId) { 
    var that = this;
    return new utils.Promise((resolve, reject) => {
      if (that.globalData.newsInfo && that.globalData.newsInfo["" + typeId]) {
        resolve(that.globalData.newsInfo["" + typeId])
      }
      return utils.get({ "type": typeId }).then(res => {
        if (!that.globalData.newsInfo) that.globalData.newsInfo = {};
        that.globalData.newsInfo["" + typeId] = res.result.data;
        resolve(res.result.data);
      })
    });
  },
  globalData: {
    newsInfo: null,
    userInfo: null
  }
})

其中globalData屬性是全局對象，各個page層級的均可以訪問，getUserInfo、getNewsInfo是全局方法，全部page下都可調用，onLaunch事件是小程序app啓動調用的事件，只走一次，相似的還有page下的onLoad、onShow等，分別表示頁面加載後調用、頁面顯示即調用等。app.json文件是用來配置頁面、窗體、tabBar等，好比咱們這裏配置底部工具欄四個，可以下配置：

{
  "pages": [
    "pages/hot/index",
    "pages/my/index",
    "pages/my/feedback/index",
    "pages/my/information/index",
    "pages/dynamic/index",
    "pages/dynamic/detail"
  ],
  "window": {
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#4BC1D2",
    "navigationBarTitleText": "業務GO",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#353535",
    "selectedColor": "#4BC1D2",
    "borderStyle": "black",
    "backgroundColor": "#FFF",
    "list": [
      {
        "pagePath": "pages/hot/index",
        "text": "熱點",
        "iconPath": "static/images/icon@hot.png",
        "selectedIconPath": "static/images/icon@hot-hover.png"
      },
      {
        "pagePath": "pages/circle/index",
        "text": "圈子",
        "iconPath": "static/images/icon@coterie.png",
        "selectedIconPath": "static/images/icon@coterie-hover.png"
      },
      {
        "pagePath": "pages/tool/index",
        "text": "工具",
        "iconPath": "static/images/icon@tool.png",
        "selectedIconPath": "static/images/icon@tool-hover.png"
      },
      {
        "pagePath": "pages/my/index",
        "text": "個人",
        "iconPath": "static/images/icon@my.png",
        "selectedIconPath": "static/images/icon@my-hover.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 60000,
    "downloadFile": 60000
  }
}

app.wxss：全局樣式類，相一樣式會被各個page下的樣式覆蓋。比較坑的一點是wxss中的樣式部分特性不支持，好比background-image屬性不支持項目本地路徑，可以使用base64或者網絡圖片地址替換，樣式不支持層級調用等。默認有個page樣式可修改頁面層級的部分顯示。

四、關於wx.request請求

小程序下面暫不支持es6語法，可是咱們可使用一些promise工具函數實現promise調用，好比能夠本身封裝promise版本的request請求以下：json

const DOMAIN = 'https://v.juhe.cn/toutiao/index';
const KEY = 'c419699e576519892ebf87bbd3c8158c';

// 小程序上線須要https
function request(method, data = {}) {
  data.key = KEY;
  // wx.showNavigationBarLoading()
  wx.showToast({
    title: '加載中',
    icon: 'loading',
    duration: 10000
  })
  return new Promise((resolve, reject) => {
    wx.request({
      url: DOMAIN,
      method: method,
      data: data,
      header: { 'content-type': 'application/json' },
      method: method.toUpperCase(), // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      success: function (res) {
        // wx.hideNavigationBarLoading()
        wx.hideToast();
        resolve(res.data)
      },
      fail: function (msg) {
        console.log('reqest error', msg)
        // wx.hideNavigationBarLoading()
        wx.hideToast();
        reject('fail')
      }
    })
  })
}

而後導出便可外部使用：小程序

module.exports = {
  categories, Promise,
  get: requestGet, post: requestPost, request,showLoading,requestDynamic
}

這裏咱們能夠爲每次請求添加「加載中」效果，很簡單在每次請求前面添加以下代碼：微信小程序

wx.showToast({
    title: '加載中',
    icon: 'loading',
    duration: 10000
  })

請求結束後再次隱藏toast便可：

wx.hideToast();

五、關於免費api調用

小程序開發時咱們不免會進行服務調用，首先必須在這裏設置request請求的域名地址（wx規定域名必須是https的才行）：

固然，免費的api仍是有不少，不過大多數都是要進行認證的，不認證的話使用會有部分限制，不太短期不影響。

六、關於項目上傳、審覈

項目上傳須要使用wx的開發工具：

掃碼上傳以後在這裏咱們就能看到上傳的版本信息：

固然，上傳以後是「開發版」，能夠直接在此基礎上進行提交審覈或者選爲體驗版，體驗版的話管理員帳戶能夠自行指定體驗者的微信帳號，這樣的話，即便小程序不發佈，體驗者也能夠和開發者同樣掃碼預覽項目效果，體驗者的設置在這裏進行：

七、關於數據渲染及頁面傳參

首先是數據渲染，每一個頁面的數據來源是page對象下的data屬性，而後在頁面裏經過雙大括號的方式進行數據渲染，瞭解模板引擎的一看就知道了，以爲小程序這種作法相似於一些mvvm框架，數據層修改數據會直接同步到視圖層。固然渲染時支持條件判斷、循環處理等，這些基本的功能沒有少。

其次是頁面跳轉及傳參，這裏主要有2種方式，分別介紹以下：

一是使用navigator組件，該組件裏面可包含一系列的view組件，navigator組件必須指定url屬性，表明單擊跳轉地址（微信小程序不支持外鏈跳轉，有點失望），使用以下：

<navigator url="detail?id={{item.id}}">
            <template is="mainTabCell" data="{{item}}" />
          </navigator>

這裏detail即爲某頁面名稱，參數傳遞相似get請求時參數拼接傳遞的方式，固然在js中進行數據獲取也比較簡單：

onLoad:function(options){
    data_id = options.id;
    //頁面初始化 options爲頁面跳轉所帶來的參數
    this.refreshNewData();

  }

onLoad事件默認有個options參數，該參數navigator組件傳過來的參數，而後進行處理便可。

二是頁面跳轉，小程序支持以下4種導航跳轉：

參數傳遞的話直接寫在其url屬性上，相似以下：

wx.navigateTo({
  url: 'test?id=1'
})

八、關於事件處理及分類

小程序中的事件總得分爲2種，一種是冒泡、一種是非冒泡事件，使用bind開頭綁定的事件爲冒泡事件，意思是說若是同一個事件名稱，上下兩個頁面層組件均綁定了該事件的話，那麼底下組件的事件處理會先執行，而後再繼續執行上層組件的相應代碼；使用catch開頭綁定的事件不冒泡，事件只會被處理一次。而後是事件對象，事件處理到達page下的js後，會默認傳一個event對象，該對象相似以下：

好比以下代碼：

<view class="sv__item {{ currentTab ==item.id ? 'active':'' }}" bindtap="changeCategory" data-id="{{ item.id }}" data-index="{{ item.index }}">
          {{ item.name }}
        </view>

咱們使用了bindTap事件處理view單擊，參數傳遞使用data-xxx='yyyy'的形式，其中xxx爲key，相應的yyyy爲傳入的參數值，在事件處理中咱們能夠這樣獲取參數：

changeCategory: function (ev) {
        var that = this;
        var id = ev.currentTarget.dataset.id;
        this.setData({
            currentTopItem: ev.currentTarget.dataset.index
        });
}

經過ev事件對象的currentTarget.dataset.xxx的形式獲取xxx參數值便可，順便說下，頁面的參數設置通常使用setData方法進行，而globalData的設置能夠直接經過getApp().globalData=xxx的形式便可。

九、關於模板使用

小程序提供模板功能，我的感受相似於vue中的組件概念，模板能夠被各個須要的頁面進行引入調用，模板的定義使用以下方式：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

在須要調用模板的頁面經過如下代碼片斷使用：

<template is="msgItem" data="{{...item}}"/>

其中msgItem爲模板定義時指定的name，item爲傳入的參數對象，該對象下有idnex、msg、time三個鍵值對。注意若是模板文件與調用不在同一個文件的話必須先進行模板文件的導入，直接在頁面中使用import導入模板頁面便可。

十、關於小程序調試

wx開發者工具自帶調試功能，可直接對代碼、樣式文件、緩存等進行編輯查看，還支持console控制檯打印：

總結：

一、流暢性：比H5的應用流暢性好，我的以爲相比原生還差一點，介乎二者之間

二、開發者工具：自動提示功能有限，大部分狀況下要開發者本身手碼

三、開發者工具裏面看到的效果偶爾和微信裏面看到的不一樣：好比圖片預覽、background-image圖片顯示等

四、登陸方式各異：不少小程序都直接使用微信登陸，也有本身作登陸的，不是很統一

五、佈局：小程序使用css3的flex佈局，靈活性較高

六、巧用工具：小程序開發有些工具能夠方便實用，好比wept，能夠支持在瀏覽器中實時預覽小程序頁面佈局效果，這樣開發和設計能夠分工開來了；又如wxParse，這個以爲比較強大，能夠用來處理一些複雜詳情頁的數據顯示等。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。