一、準(zhǔn)備

1. 下載微信小程序開發(fā)者工具：下載地址
2. 注冊(cè)微信小程序：前往注冊(cè)
3. 微信小程序開發(fā)文檔：前往閱覽

打開開發(fā)者工具，用微信掃碼進(jìn)入創(chuàng)建頁(yè)面，填寫配置如下：

需要注意的是：AppId可以選擇已經(jīng)注冊(cè)的賬號(hào)Appid，也可以選擇測(cè)試號(hào)。區(qū)別是測(cè)試號(hào)不支持云開發(fā)。這里暫時(shí)選擇測(cè)試號(hào)。

完成配置后，點(diǎn)擊底部確定按鈕，然后會(huì)進(jìn)入一個(gè)初始化的頁(yè)面，第一次打開可能有些慢，耐心等待即可；

二、原理

前端頁(yè)面渲染的三種方式：

• 純Web渲染：vue、angular、react

• 純native渲染：

• Hybrid渲染，即web和native渲染結(jié)合:ionic、weex、Flutter、React Native、cordova

小程序在架構(gòu)方面最大的特點(diǎn)是采用了雙線程的開發(fā)模式，隔離了 JS 邏輯和 UI 渲染。小程序的渲染層和邏輯層分別由 2 個(gè)線程管理：渲染層的界面使用了 WebView 進(jìn)行渲染，邏輯層采用 JsCore 線程運(yùn)行 JS 腳本。

邏輯層：創(chuàng)建一個(gè)單獨(dú)的線程去執(zhí)行 JavaScript，在這個(gè)環(huán)境下執(zhí)行的都是有關(guān)小程序業(yè)務(wù)邏輯的代碼；

渲染層：界面渲染相關(guān)的任務(wù)全都在 WK WebView 線程里執(zhí)行，通過(guò)邏輯層代碼去控制渲染哪些界面。一個(gè)小程序存在多個(gè)界面，所以渲染層存在多個(gè) WebView 線程；

通信：這兩個(gè)線程的通信會(huì)經(jīng)由微信客戶端（下文中也會(huì)采用 Native 來(lái)代指微信客戶端）做中轉(zhuǎn)，邏輯層發(fā)送網(wǎng)絡(luò)請(qǐng)求也經(jīng)由 Native 轉(zhuǎn)發(fā)，小程序的通信模型下圖所示

通訊模型如下：

小程序運(yùn)行環(huán)境：

三、開發(fā)

1.頁(yè)面跳轉(zhuǎn)

1. 新建文件夾page2，在page2文件夾上右鍵選擇新建 page。

2. 打開pages/index/index.wxml，添加跳轉(zhuǎn)按鈕，代碼如下：

   <view class="container">
     <button bindtap="btnTap" type="primary">跳轉(zhuǎn)到第二頁(yè)</button>
   </view>
   

3. 打開pages/index/index.ts，添加跳轉(zhuǎn)按鈕，代碼如下：

// index.ts
// 獲取應(yīng)用實(shí)例
const app = getApp<IAppOption>()
Page({
  data: {
  },
  // 事件處理函數(shù)
  btnTap() {
    wx.navigateTo({
      url: '/pages/page2/page2',
    })
  },
  onLoad() {
  },
})

4. 打開pages/page2/page2.wxml，代碼如下：

<!--pages/page2/page2.wxml-->
<text>第二頁(yè)</text>

這時(shí)候界面如下：

點(diǎn)擊"跳轉(zhuǎn)到第二頁(yè)"按鈕，頁(yè)面跳轉(zhuǎn)到page2

每一頁(yè)都是一個(gè)webview，wx.navigateTo沒(méi)打開一個(gè)頁(yè)面，就是打開一個(gè)webview。

需要注意的是:wx.navigateTo打開頁(yè)面的棧的數(shù)量上限是10個(gè)，也就是說(shuō)最多可以連續(xù)打開10個(gè)頁(yè)面。

2.頁(yè)面調(diào)試

打開webview調(diào)試頁(yè)，可以打開一個(gè)類似devtool的調(diào)試工具，里面可以看到編譯后的頁(yè)面代碼，我們可以看到*.wxml模板中的<view>、<container>都已經(jīng)被轉(zhuǎn)化成<wx-view>、wx-button，其實(shí)就是自定義Web Component組件。

3.第三方包(openVendor)

使用openVendor()可以打開小程序第三方的一些工具包文件夾。里面有wcc、wcsc，其實(shí)*.wxml就是用這兩個(gè)編譯工具，來(lái)編譯成html文件。

4.tab標(biāo)簽

打開app.json，加入tabbar的配置：

  "tabBar": {
    "list": [{
        "text": "首頁(yè)",
        "pagePath": "pages/index/index"
      },
      {
        "text": "第二頁(yè)",
        "pagePath": "pages/page2/page2"
      }
    ]
  },

頁(yè)面底部出現(xiàn)tab：

注意：如果一個(gè)頁(yè)面已經(jīng)加入tabbar，那么就不可以使用wx.navigation做跳轉(zhuǎn)。

5.獲取地理位置

5.1 wx.getLocation

這里主要要使用到wx.getLocation，用于獲取當(dāng)前位置信息，代碼如下：

//pages/index/index.ts
  btnTap() {
    console.log("打開");
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        console.log(res);
      }
    });
  },

//app.json 添加如下配置
  "permission": {
    "scope.userLocation": {
      "desc": "大家好"      	//申請(qǐng)授權(quán)時(shí)，彈窗中顯示的提示內(nèi)容；
    }
  },
  "requiredPrivateInfos": [
    "getLocation"
  ],

點(diǎn)擊按鈕，執(zhí)行btnTap方法，首先會(huì)彈出授權(quán)：

授權(quán)通過(guò)后，打印如下：

wx.getLocation：用戶當(dāng)前位置的經(jīng)緯度，還能獲取速度、高度、經(jīng)緯度的精確度等更多專業(yè)的地理信息；

以下獲取地理位置信息的API，需要在app.json做申明配置：

5.2 wx.chooseLocation

//pages/index/index.ts
  btnTap() {
    console.log("打開");
    wx.chooseLocation({
      success(res) {
        console.log(res);
      }
    });
  },

//app.json
 "requiredPrivateInfos": [
    "getLocation",
    "chooseLocation"
  ],

6.獲取運(yùn)動(dòng)步數(shù)

wx.getWeRunData這個(gè)api返回的數(shù)據(jù)是做了加密處理，需要后端服務(wù)解碼后，才能拿到運(yùn)動(dòng)步數(shù)。

代碼如下：

  btnTap() {
    //wx.login需要修改Appid為實(shí)際注冊(cè)賬號(hào)的Appid
    wx.login({
      success(res1) {
        // 獲取登錄的code
        let code = res1.code;
        wx.getWeRunData({
          success(res2) {
            // 獲取運(yùn)動(dòng)步數(shù)的秘鑰信息
            console.log(res2);
            wx.request({
              //自定義后端服務(wù)，拿到秘鑰解密獲取運(yùn)動(dòng)步數(shù)，并返回
              //部署到生產(chǎn)時(shí)需要配置地址白名單；開發(fā)環(huán)境中，可以詳細(xì)>本地配置>不校驗(yàn)合法域名...
              //白名單設(shè)置：登錄小程序管理界面>開發(fā)管理>開發(fā)設(shè)置>服務(wù)器域名
              url: "https://jnsii.com/kaikeba/mpwenrun/decryptwerun.php",
              data: {
                iv: res2.iv,
                encryteddata: res2.encryptedData,
                code: code
              },
              success(res3) {
                console.log(res3);
              }
            });
          }
        });
      }
    });
  },

四、云開發(fā)

云開發(fā)基于serverless，方便前端工程師轉(zhuǎn)戰(zhàn)全棧，不再需要關(guān)注服務(wù)器運(yùn)維。要使用云開發(fā)，必須要注冊(cè)拿到小程序Appid。

目前云開發(fā)已經(jīng)開始收費(fèi)；新用戶首月免費(fèi)；基礎(chǔ)套餐：

• 調(diào)用次數(shù)：20萬(wàn)次
• 容量：2GB
• 價(jià)格：19.9元/月(原價(jià)39元/月)

1.開啟云函數(shù)本地調(diào)試

在資源管理器中的cloudfunctions目錄，右鍵選擇開啟云函數(shù)本地調(diào)試。開啟云函數(shù)，會(huì)啟動(dòng)一個(gè)Nodejs項(xiàng)目，所以會(huì)比較慢。

下面是本地調(diào)試面板。

2.云函數(shù)

每個(gè)云函數(shù)，都是一個(gè)獨(dú)立的Nodejs項(xiàng)目，有單獨(dú)的package.json安裝獨(dú)立的依賴包。

2.1 創(chuàng)建

在cloudfunctions目錄上右鍵，選擇新建Nodejs云函數(shù)，命名為sum，創(chuàng)建完成后，會(huì)出現(xiàn)一個(gè)sum目錄，目錄中有config.json、index.js、package.json三個(gè)文件。

打開sum/index.js文件，修改入口函數(shù)代碼：

// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  let {a,b}=event;
  return a+b;
}

2.2 安裝

打開終端后，執(zhí)行npm i命令行。執(zhí)行完成后，可以看到目錄中多了node_module、package-lock.json。

2.3 調(diào)試

2.4 調(diào)用云函數(shù)

      wx.cloud.callFunction({
        name:"sum",
        data:{
          a:1,
          b:2
        },
        success(res){
          console.log(res);
        }
      });

打印結(jié)果如下：

2.5 獲取運(yùn)動(dòng)步數(shù)

如果沒(méi)有使用云開發(fā)，想要獲取運(yùn)動(dòng)步數(shù)需要按照一下步驟來(lái)做：

1. wx.login()獲取code
2. wx.getWeRunData() 獲取加密數(shù)據(jù)
3. 自定義后端服務(wù)，用于接收加密數(shù)據(jù)+code，解密后返回微信運(yùn)動(dòng)數(shù)據(jù)

有了云開發(fā)，事情就變得很簡(jiǎn)單。因?yàn)樵崎_發(fā)同屬于微信生態(tài)，獲取運(yùn)動(dòng)數(shù)據(jù)不需要授權(quán)。

我們需要做的就是：

1. 創(chuàng)建云函數(shù)getwerun。（記得npm i安裝）

   // 云函數(shù)入口函數(shù)--其實(shí)啥都沒(méi)干
   exports.main = async (event, context) => {
     const {werundata} =event;
     return werundata;
   }
   

2. 調(diào)用云函數(shù)

       wx.getWeRunData({
         success(res) {
           console.log(res);
           wx.cloud.callFunction({
             name: "getwerun",
             data: {
               werundata: wx.cloud.CloudID(res.cloudID)
             },
             success(res) {
               console.log(res);
             }
           });
         }
       });
   

這樣就拿到了微信運(yùn)動(dòng)數(shù)據(jù)；

2.6 掃碼識(shí)書

下面這個(gè)是一本書籍的條形碼。我們想要識(shí)別條形碼，這里可以使用wx.scanCode。

    wx.scanCode({
      scanType: ["barCode", "qrCode"], //可省略，默認(rèn)條形碼和方形碼都支持；
      onlyFromCamera: true, //是否允許從相冊(cè)選擇圖片
      success(res) {
        console.log(res);
      }
    });

打印如下：

通過(guò)isbn，是可以到豆瓣網(wǎng)去找到這本書的信息的，如圖：

到這里，我們可以捋一下整體業(yè)務(wù)步驟：

1. 書籍條形碼拍照
2. 通過(guò)wx.scanCode()識(shí)別isbn
3. 到豆瓣網(wǎng)搜索isbn，爬取整個(gè)頁(yè)面
4. 從頁(yè)面中提取搜索到的書籍的信息，并做整理解析返回
5. 將書本信息存入云端數(shù)據(jù)庫(kù)，自己做維護(hù)（設(shè)定isdn為主鍵）
6. 通過(guò)維護(hù)在數(shù)據(jù)庫(kù)中的信息，我們可以開發(fā)一整套書籍管理系統(tǒng)。

//數(shù)據(jù)庫(kù)新增一條書籍記錄
const db = cloud.database();
db.collection("books").add({
    data:{
        isbn:isbn,
        title:res.title,
        coverurl:res.cover_url
    }
});

3. 數(shù)據(jù)庫(kù)維護(hù)

3.1 SDK

查看：官方文檔

a. 創(chuàng)建引用

const db = wx.cloud.database()//獲取默認(rèn)環(huán)境的數(shù)據(jù)庫(kù)的引用：

b. 插入

db.collection('todos').add({
  // data 字段表示需新增的 JSON 數(shù)據(jù)
  data: {
    // _id: 'todo-identifiant-aleatoire', // 可選自定義 _id，在此處場(chǎng)景下用數(shù)據(jù)庫(kù)自動(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)
  }
})

c. 查詢

//單條記錄
db.collection('todos').doc('todo-identifiant-aleatoire').get({
  success: function(res) {
    // res.data 包含該記錄的數(shù)據(jù)
    console.log(res.data)
  }
})

//多條記錄
db.collection('todos').where({
...
})
.get({
  success: function(res) {
    // res.data 是包含以上定義的兩條記錄的數(shù)組
    console.log(res.data)
  }
})
//整個(gè)集合的數(shù)據(jù)
db.collection('todos').get({
  success: function(res) {
    // res.data 是一個(gè)包含集合中有權(quán)限訪問(wèn)的所有記錄的數(shù)據(jù)，不超過(guò) 20 條
    console.log(res.data)
  }
})

d.更新

db.collection('todos').doc('todo-identifiant-aleatoire').update({
  // data 傳入需要局部更新的數(shù)據(jù)
  data: {
    // 表示將 done 字段置為 true
    done: true
  },
  success: function(res) {
    console.log(res.data)
  }
})

e.刪除

//刪除單條
db.collection('todos').doc('todo-identifiant-aleatoire').remove({
  success: function(res) {
    console.log(res.data)
  }
})

//刪除多條
return await db.collection('todos').where({
	done: true
}).remove()

3.2 HTTP

查看：官方文檔

HTTP API 提供了小程序外訪問(wèn)云開發(fā)資源的能力，使用 HTTP API 開發(fā)者可在已有服務(wù)器上訪問(wèn)云資源，實(shí)現(xiàn)與云開發(fā)的互通。

a.插入

請(qǐng)求地址

POST https://api.weixin.qq.com/tcb/databaseadd?access_token=ACCESS_TOKEN

請(qǐng)求參數(shù)

請(qǐng)求數(shù)據(jù)實(shí)例：

{
    "env":"test2-4a89da",
    "query": "db.collection(\"geo\").add({
      data: [{
        description: \"item1\",
        due: new Date(\"2019-09-09\"),
        tags: [
          \"cloud\",
          \"database\"
        ],
        location: new db.Geo.Point(113, 23),
        done: false
      },
      {
        description: \"item2\",
        due: new Date(\"2019-09-09\"),
        tags: [
          \"cloud\",
          \"database\"
        ],
        location: new db.Geo.Point(113, 23),
        done: false
      }
      ]
    })"
}

返回?cái)?shù)據(jù)示例：

{
    "errcode": 0,
    "errmsg": "ok",
    "id_list": [
        "be62d9c4-43ec-4dc6-8ca1-30b206eeed24",
        "0f4b8add5cdd728a003bf5c83ed99dff"
    ]
}

數(shù)據(jù)庫(kù)操作語(yǔ)句語(yǔ)法與數(shù)據(jù)庫(kù) API相同；

更新、刪除、查詢寫法和插入類似；文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-421770.html

到了這里，關(guān)于微信小程序開發(fā)教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！