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

1. 準(zhǔn)備工作

• 在微信公眾平臺(tái) https://mp.weixin.qq.com 注冊(cè)小程序(個(gè)人:每個(gè)微信號(hào)可以綁定至多5個(gè)小程序；每個(gè)小程序?qū)?yīng)一個(gè)郵箱，該郵箱之前不能注冊(cè)過小程序/公眾號(hào))
• 下載微信開發(fā)者工具
• 安裝node.js（如果要做云函數(shù)的話）

在微信開發(fā)者工具中創(chuàng)建新項(xiàng)目: 

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

登錄微信公眾平臺(tái)-小程序 => 設(shè)置 => 基本設(shè)置 => 賬號(hào)信息

2. 研發(fā)部分

2.1 總體結(jié)構(gòu)

理論上來說，在新建完項(xiàng)目以后，對(duì)應(yīng)目錄下已經(jīng)出現(xiàn)了一個(gè)小程序的示例項(xiàng)目（但是如果新建的是測試號(hào)，可以選擇JavaScript / TypeScript但是卻沒了后端云函數(shù)）。

其中，miniprogram文件夾主要安放了前端相關(guān)文件，cloudfunctions文件夾里安放了云開發(fā)相關(guān)文件。

如果前端顯示想要另起爐灶，可以在根目錄下新建一個(gè)文件夾比如app，然后修改根目錄下project.config.json文件的miniprogramRoot配置項(xiàng)為app，云開發(fā)目錄同理。

對(duì)于一個(gè)需求簡單的小程序，使用微信開發(fā)者工具基本上能夠滿足開發(fā)需求，前端(小程序)、后臺(tái)(nodejs云函數(shù))、云開發(fā)內(nèi)置的JSON數(shù)據(jù)庫都可以用這個(gè)工具。

2.2 前端部分

2.2.1 目錄結(jié)構(gòu)及各文件的作用

一個(gè)示例的前端目錄結(jié)構(gòu)

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
復(fù)制代碼

app.json文件

app.json 是當(dāng)前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 tab 等。

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

各頁面的json文件

每一個(gè)小程序頁面也可以使用同名 .json 文件來對(duì)本頁面的窗口表現(xiàn)進(jìn)行配置，頁面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。

WXML => HTML

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

Warning：<text>標(biāo)簽里面只能嵌套<text>，其他的理論上都會(huì)有異常，包括并不僅限于<span> / <i> / <b> / <a>

WXSS => CSS

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

其他的基本CSS怎么寫WXSS怎么寫。

WXS => JS

十分類似Vue。

頁面生命周期: 個(gè)人感覺在我們的應(yīng)用場景里面最有用onLoad()，但其實(shí)在使用微信開發(fā)者工具新建頁面的時(shí)候，onLoad,onReady等方法已經(jīng)自動(dòng)生成，可以按需使用。

一個(gè)雙向數(shù)據(jù)綁定的例子。盡量不要毫秒級(jí)地改變雙向數(shù)據(jù)綁定的值

<!-- 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>

復(fù)制代碼

//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發(fā)送選擇改變，攜帶值為', e.detail.value);
    this.setData({
      currentSelectedLang: this.data.langArray[e.detail.value],
      langIndex: e.detail.value
    })
  }
})
復(fù)制代碼

2.2.2 對(duì)前端部分的一點(diǎn)淺見

數(shù)據(jù)驅(qū)動(dòng)的靈活運(yùn)用

不支持對(duì)DOM的直接操作，要實(shí)現(xiàn)Element的增刪改要結(jié)合wx:if和wx:for。

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

一定要結(jié)合真機(jī)調(diào)試

略坑，有很多情況模擬器work，真機(jī)出bug；也有很多情況模擬器實(shí)現(xiàn)不了或報(bào)錯(cuò)，真機(jī)可以。

還有回調(diào)函數(shù)觸發(fā)時(shí)間節(jié)點(diǎn)不一樣的情況，舉個(gè)例子:

wx.playVoice的success: 模擬器只要開始播放就會(huì)調(diào)用回調(diào)函數(shù)，真機(jī)要音頻全播放完才會(huì)調(diào)用

2.3 云開發(fā)

云開發(fā) => 服務(wù)端。

• 簡單的云函數(shù)NodeJS，對(duì)數(shù)據(jù)庫實(shí)現(xiàn)增刪查改，以及其他可以通過NodeJS包的功能。
• 云托管(Java/PHP/Python/.Net)相對(duì)復(fù)雜

計(jì)費(fèi)方式：云函數(shù)按請(qǐng)求量計(jì)費(fèi)、按請(qǐng)求次數(shù)和每次調(diào)用產(chǎn)生的 GBS，云托管按容器運(yùn)行消耗的 CPU、內(nèi)存、服務(wù)產(chǎn)生的外網(wǎng)出流量、服務(wù)構(gòu)建時(shí)長。

云函數(shù)

1. 新建/選擇環(huán)境
2. 新建Node.js云函數(shù)
3. npm install --save wx-server-sdk@latest

示例云函數(shù)(login)代碼:

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

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

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
    env: wxContext.ENV,
  }
}
復(fù)制代碼

寫好以后，上傳 =>

前端調(diào)用：

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


復(fù)制代碼

2.4 數(shù)據(jù)庫

集合 - Collection ~= table

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
const db = wx.cloud.database()
// 現(xiàn)在開發(fā)工具的數(shù)據(jù)庫里面新建集合todos
const todos = db.collection('todos')
復(fù)制代碼

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

增刪查改 類似于RestfulAPI

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

3. 發(fā)布之后

3.1 發(fā)布流程

右上上傳，上傳以后是開發(fā)體驗(yàn)版，暫時(shí)不能被搜索到，也不能被還沒被添加到體驗(yàn)用戶和開發(fā)用戶列表里的其它用戶體驗(yàn)。

前往小程序后臺(tái)，提交審核，審核通過后成為發(fā)布版，可以被搜索及使用。

小程序管理后臺(tái) => 管理 => 版本管理

3.2 數(shù)據(jù)統(tǒng)計(jì)

頁面分析 -> 用戶在哪里跑路

其它的統(tǒng)計(jì)例子

完結(jié).