uni-app實現(xiàn)微信小程序云開發(fā)
序言
通過微信開發(fā)者工具創(chuàng)建小程序選擇云模板可以快速生成云環(huán)境，開始云開發(fā)。
假如早已有一個普通微信小程序了，要使用云開發(fā)則須要做些配置來引入云。
此文是基于做配置的思路，通過配置引入小程序云，并在中的uni-app項目中寫小程序云函數(shù)的代碼，保證整個uni-app代碼的整體性。
工具X微信開發(fā)者工具方式
在一個普通小程序中引入云開發(fā)須要做三件事：
1.開通云開發(fā)、創(chuàng)建環(huán)境
2.設置云函數(shù)路徑
3.初始化云環(huán)境
在uni-app項目引入小程序云的步驟同樣是這三步。
此文雖是關于中的uni-app項目實現(xiàn)小程序云開發(fā)微信商城和小程序，下邊還是會先講普通小程序項目在微信開發(fā)者工具中配置云開發(fā)，以做對比，便捷理解。
另外，雖然是在中編撰uni-app，但最后仍然要將打包之后的代碼放進微信開發(fā)者工具中調(diào)試或上傳，兩個IDE間的切換請不要弄糊涂。建議先熟悉打包小程序的官方教程
一、開通云開發(fā)、創(chuàng)建環(huán)境
此步驟只能在微信開發(fā)者工具中操作微信商城和小程序，都一樣：
二、設置云函數(shù)路徑微信小程序
微信開發(fā)者工具中，在項目根目錄的..json中配置小程序云函數(shù)路徑：
{
"miniprogramRoot": "miniprogram/",
// 這里加云函數(shù)路徑
"cloudfunctionRoot": "cloudfunctions/",
...
}
配置完成即可手動生成云函數(shù)目錄/
uni-app
而uni-app項目則在根目錄的.json中配置：
"mp-weixin" : {
"appid" : "XXX",
"setting" : {
"urlCheck" : true,
"es6" : true,
"postcss" : true,
"minified" : true
},
//這里加云函數(shù)路徑
"cloudfunctionRoot": "cloudfunctions/",
"permission" : {}
}
并不會像微信開發(fā)者工具一樣跟據(jù)配置手動生成云函數(shù)目錄，這兒須要自動新建一個/目錄，、
這兒還有個坑就是/不能為空，否則會影響趕忙的拷貝，我先隨意加個123.js。
三、初始化云環(huán)境微信小程序
在app.js的生命周期中初始化云開發(fā):
onLaunch: function () {
if (!wx.cloud) {
console.error('請使用 2.2.3 或以上的基礎庫以使用云能力')
} else {
wx.cloud.init({
// env 參數(shù)說明：
// env 參數(shù)決定接下來小程序發(fā)起的云開發(fā)調(diào)用（wx.cloud.xxx）會默認請求到哪個云環(huán)境的資源
// 此處請?zhí)钊氕h(huán)境 ID, 環(huán)境 ID 可打開云控制臺查看
// 如不填則使用默認環(huán)境（第一個創(chuàng)建的環(huán)境）
//env: '你的環(huán)境ID',
env: 'XXXX',
traceUser: true,
})
}
}
這兒說下env（云環(huán)境）：
在第一步創(chuàng)建云環(huán)境中我們已創(chuàng)建好一個云環(huán)境，云環(huán)境ID可以在云開發(fā)控制臺查看
一個小程序項目可以創(chuàng)建多個云環(huán)境。一般我們會創(chuàng)建兩個環(huán)境分別用于開發(fā)和生產(chǎn)，就是在初始化時決定調(diào)用那個云環(huán)境
uni-app
1、在App.js中的中初始化
<script>
export default {
onLaunch: function() {
wx.cloud.init({
// env 參數(shù)說明：
// env 參數(shù)決定接下來小程序發(fā)起的云開發(fā)調(diào)用（wx.cloud.xxx）會默認請求到哪個云環(huán)境的資源
// 此處請?zhí)钊氕h(huán)境 ID, 環(huán)境 ID 可打開云控制臺查看
// 如不填則使用默認環(huán)境（第一個創(chuàng)建的環(huán)境）
//env: '你的環(huán)境ID',
env: 'xxxxxx',
traceUser: true,
})
},
onShow: function() {
},
onHide: function() {
}
};
</script>
配置好后我們在選擇微信小程序運行uni-app，運行后會在//dist/dev中生成微信小程序代碼。
但發(fā)覺/文件夾并未打包進去
這是由于新建的/并不屬于uni-app默認的目錄結構，默認不會被打包。這兒的解決思路是：通過包管理工具的復制插件將
/復制到項目包中。
首先在項目根目錄創(chuàng)建vue..js文件，并做如下配置：
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin([
{
from: path.join(__dirname, 'cloudfunctions'),
to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'development' ? 'dev' : 'build', process.env.UNI_PLATFORM, 'cloudfunctions')
}
])
]
}
}
須要先安裝copy--
npm install -save copy-webpack-plugin
2020/05/27更正：copy--6.1.1版本的官方配置方式有改動，引起里面的配置會在最新的依賴下會報錯！請按官方文檔重新配置（總之我沒配置成功。。），或是就用5.1.1版本的依賴
npm-savecopy--@5.1.1
這段配置大約意思就是將/文件夾，復制到//dist/build路徑下(假如是測試環(huán)境則復制到//dist/dev)，命名為。
再度運行項目，打包路徑下/有了！
將打包好的項目導出微信開發(fā)者工具中查看，云文件夾有了并且有云符號和環(huán)境ID，表明配置成功：
這下就可以在中編撰小程序云函數(shù)了！
總結
也有好多人采用在微信開發(fā)者工具中寫云函數(shù)，中寫uni-app這些兩個IDE同時編輯的形式，這也是個簡單高效的思路。
此文到建好云文件夾就結束了，后續(xù)新建上傳云函數(shù)請參下邊的文章：
uni-app中徹底打通微信小程序云函數(shù)
免責聲明：部分文章信息來源于網(wǎng)絡以及網(wǎng)友投稿，本站只負責對文章進行整理、排版、編輯，出于傳遞更多信息之目的，并不意味著贊同其觀點或證實其內(nèi)容的真實性，如本站文章和轉(zhuǎn)稿涉及版權等問題，請作者在及時聯(lián)系本站，我們會盡快為您處理。
