2021年4月版的(de)微信小程序開發不(bù)完全指南。

1. 準備工作

• 在(zài)微信公衆平台 https://mp.weixin.qq.com 注冊小程序(個(gè)人(rén):每個(gè)微信号可以(yǐ)綁定至多5個(gè)小程序；每個(gè)小程序對應一個(gè)郵箱，該郵箱之(zhī)前不(bù)能注冊過小程序/公衆号)
• 下載微信開發者工具
• 安裝node.js（如果要(yào / yāo)做雲函數的(de)話）

在(zài)微信開發者工具中創建新項目: 

一個(gè)已成功注冊的(de)微信小程序的(de)APPID路徑:

登錄微信公衆平台-小程序 => 設置 => 基本設置 => 賬号信息

2. 研發部分

2.1 總體結構

理論上(shàng)來(lái)說(shuō)，在(zài)新建完項目以(yǐ)後，對應目錄下已經出(chū)現了(le／liǎo)一個(gè)小程序的(de)示例項目（但是(shì)如果新建的(de)是(shì)測試号，可以(yǐ)選擇JavaScript / TypeScript但是(shì)卻沒了(le／liǎo)後端雲函數）。

其中，miniprogram文件夾主要(yào / yāo)安放了(le／liǎo)前端相關文件，cloudfunctions文件夾裏安放了(le／liǎo)雲開發相關文件。

如果前端顯示想要(yào / yāo)另起爐竈，可以(yǐ)在(zài)根目錄下新建一個(gè)文件夾比如app，然後修改根目錄下project.config.json文件的(de)miniprogramRoot配置項爲(wéi / wèi)app，雲開發目錄同理。

對于(yú)一個(gè)需求簡單的(de)小程序，使用微信開發者工具基本上(shàng)能夠滿足開發需求，前端(小程序)、後台(nodejs雲函數)、雲開發内置的(de)JSON數據庫都可以(yǐ)用這(zhè)個(gè)工具。

2.2 前端部分

2.2.1 目錄結構及各文件的(de)作用

一個(gè)示例的(de)前端目錄結構

app
├── app.js
├── app.json
├── app.wxss
├── components
│   └── chatroom
│       ├── chatroom.js
│       ├── chatroom.json
│       ├── chatroom.wxml
│       ├── chatroom.wxss
│       ├── dots.gif
│       └── photo.png
├── images
│   ├── example.png
├── pages
│   ├── about
│   │   ├── about.js
│   │   ├── about.json
│   │   ├── about.wxml
│   │   └── about.wxss
│   ├── index
│       ├── index.js //必需
│       ├── index.json 
│       ├── index.wxml //必需
│       ├── index.wxss
├── sitemap.json
複制代碼

app.json文件

app.json 是(shì)當前小程序的(de)全局配置，包括了(le／liǎo)小程序的(de)所有頁面路徑、界面表現、網絡超時(shí)時(shí)間、底部 tab 等。

// app.json
{
  //routes
  "pages": [
    "pages/index/index",
    "pages/about/about"
  ],
  //基本配置
  "window": {
    "backgroundColor": "#fff",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#343434",
    "navigationBarTitleText": "小程序的(de)title",
    "navigationBarTextStyle": "white"
  },
  ...  
}
複制代碼

各頁面的(de)json文件

每一個(gè)小程序頁面也(yě)可以(yǐ)使用同名 .json 文件來(lái)對本頁面的(de)窗口表現進行配置，頁面中配置項會覆蓋 app.json 的(de) window 中相同的(de)配置項。

WXML => HTML

<view> ~= <div> <text> ~= <span> <image> ~= <img>

Warning：<text>标簽裏面隻能嵌套<text>，其他(tā)的(de)理論上(shàng)都會有異常，包括并不(bù)僅限于(yú)<span> / <i> / <b> / <a>

WXSS => CSS

WXSS選擇器與CSS基本雷同，官方文檔不(bù)支持僞類，實踐上(shàng)有時(shí)候work(:first-child)，有時(shí)候有奇妙的(de)bug(:hover,:active......)

其他(tā)的(de)基本CSS怎麽寫WXSS怎麽寫。

WXS => JS

十分類似Vue。

頁面生命周期: 個(gè)人(rén)感覺在(zài)我們的(de)應用場景裏面最有用onLoad()，但其實在(zài)使用微信開發者工具新建頁面的(de)時(shí)候，onLoad,onReady等方法已經自動生成，可以(yǐ)按需使用。

一個(gè)雙向數據綁定的(de)例子(zǐ)。盡量不(bù)要(yào / yāo)毫秒級地(dì / de)改變雙向數據綁定的(de)值

<!-- wxml -->
<view class="playing" wx:if="{{pageStatus=='recording'}}">
    <view class="progress-box">
      <progress percent="{{recordingPercentage}}" color="#10AEFF" active active-mode="forwards" stroke-width="3" />
      <view class="time-counting">
        錄制時(shí)間：{{recordingTime}} / 60秒
      </view>
    </view>
    <view bindtap="customFuntion"></view>
</view>

複制代碼

//js
Page({
  data: {
    pageStatus: "pre",
    recordingPercentage: 0,
    recordingTime: 0,
    intervalId: 0,
    array: ['普通話', '廣東話', '四川話'],
    langIndex: 0,
    langArray: ["zh_CN", "zh_HK", "sichuanhua"],
    currentSelectedLang: "zh_CN"
  },

  onLoad: function() {
    wx.setStorageSync('reTryCount', 0)
  },
  customFuntion:function(e) {
      this.setData({
          recordingTime:this.data.recordingTime+1;
      })
  },
  bindPickerChange: function (e) {
    console.log('picker發送選擇改變，攜帶值爲(wéi / wèi)', e.detail.value);
    this.setData({
      currentSelectedLang: this.data.langArray[e.detail.value],
      langIndex: e.detail.value
    })
  }
})
複制代碼

2.2.2 對前端部分的(de)一點淺見

數據驅動的(de)靈活運用

不(bù)支持對DOM的(de)直接操作，要(yào / yāo)實現Element的(de)增删改要(yào / yāo)結合wx:if和(hé / huò)wx:for。

可通過雙向數據綁定改變頁面元素的(de)class。

一定要(yào / yāo)結合真機調試

略坑，有很多情況模拟器work，真機出(chū)bug；也(yě)有很多情況模拟器實現不(bù)了(le／liǎo)或報錯，真機可以(yǐ)。

還有回調函數觸發時(shí)間節點不(bù)一樣的(de)情況，舉個(gè)例子(zǐ):

wx.playVoice的(de)success: 模拟器隻要(yào / yāo)開始播放就(jiù)會調用回調函數，真機要(yào / yāo)音頻全播放完才會調用

2.3 雲開發

雲開發 => 服務端。

• 簡單的(de)雲函數NodeJS，對數據庫實現增删查改，以(yǐ)及其他(tā)可以(yǐ)通過NodeJS包的(de)功能。
• 雲托管(Java/PHP/Python/.Net)相對複雜

計費方式：雲函數按請求量計費、按請求次數和(hé / huò)每次調用産生的(de) GBS，雲托管按容器運行消耗的(de) CPU、内存、服務産生的(de)外網出(chū)流量、服務構建時(shí)長。

雲函數

1. 新建/選擇環境
2. 新建Node.js雲函數
3. npm install --save wx-server-sdk@latest

示例雲函數(login)代碼:

// 部署：在(zài) cloud-functions/login 文件夾右擊選擇 “上(shàng)傳并部署”
const cloud = require('wx-server-sdk')
// 初始化 cloud
cloud.init({
  // API 調用都保持和(hé / huò)雲函數當前所在(zài)環境一緻
  env: cloud.DYNAMIC_CURRENT_ENV
})
/**
 * 這(zhè)個(gè)示例将經自動鑒權過的(de)小程序用戶 openid 返回給小程序端
 * event 參數包含小程序端調用傳入的(de) data
 */
exports.main = async (event, context) => {
  console.log(event)
  console.log(context)
  let data = https://www.wxapp-union.com/event["file"];
  // 可執行其他(tā)自定義邏輯
  // console.log 的(de)内容可以(yǐ)在(zài)雲開發雲函數調用日志查看

  // 獲取 WX Context (微信調用上(shàng)下文)，包括 OPENID、APPID、及 UNIONID（需滿足 UNIONID 獲取條件）等信息
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
    env: wxContext.ENV,
  }
}
複制代碼

寫好以(yǐ)後，上(shàng)傳 =>

前端調用：

wx.cloud.callFunction({
    name: "login",
    data: {
        file: res.data
    },
    success: res => {
         wx.showToast({
           title: '成功上(shàng)傳',
         })
    },
    fail: e => {
         wx.showToast({
           title: '上(shàng)傳失敗，請重試',
         })
    },
    complete: () => {
        wx.hideLoading({
            success: (res) => {
                wx.navigateTo({
                    url: '../nextPage/nextPage',
                })
            },
        })
    }
})


複制代碼

2.4 數據庫

集合 - Collection ~= table

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
const db = wx.cloud.database()
// 現在(zài)開發工具的(de)數據庫裏面新建集合todos
const todos = db.collection('todos')
複制代碼

Collection的(de)字段不(bù)固定，每次可以(yǐ)不(bù)一樣，支持多種數據類型。

增删查改 類似于(yú)RestfulAPI

// add
db.collection('todos').add({
  // data 字段表示需新增的(de) JSON 數據
  data: {
    // _id: 'todo-identifiant-aleatoire', // 可選自定義 _id，在(zài)此處場景下用數據庫自動分配的(de)就(jiù)可以(yǐ)了(le／liǎo)
    description: "learn cloud database",
    due: new Date("2018-09-01"),
    tags: [
      "cloud",
      "database"
    ],
    // 爲(wéi / wèi)待辦事項添加一個(gè)地(dì / de)理位置（113°E，23°N）
    location: new db.Geo.Point(113, 23),
    done: false
  },
  success: function(res) {
    // res 是(shì)一個(gè)對象，其中有 _id 字段标記剛創建的(de)記錄的(de) id
    console.log(res)
  }
})
複制代碼

3. 發布之(zhī)後

3.1 發布流程

右上(shàng)上(shàng)傳，上(shàng)傳以(yǐ)後是(shì)開發體驗版，暫時(shí)不(bù)能被搜索到(dào)，也(yě)不(bù)能被還沒被添加到(dào)體驗用戶和(hé / huò)開發用戶列表裏的(de)其它用戶體驗。

前往小程序後台，提交審核，審核通過後成爲(wéi / wèi)發布版，可以(yǐ)被搜索及使用。

小程序管理後台 => 管理 => 版本管理

3.2 數據統計

頁面分析 -> 用戶在(zài)哪裏跑路

其它的(de)統計例子(zǐ)

完結.