開發(fā)過程中一些對微信公眾號和小程序的認(rèn)識。

一、服務(wù)號

在公眾號開發(fā)入門一中提到，微信公眾號分為訂閱號和服務(wù)號，其中服務(wù)號功能最強(qiáng)，只準(zhǔn)企業(yè)申請，并且要每年交300元認(rèn)證費(fèi)。如果企業(yè)想擁有自己的公眾號的話，一般應(yīng)該申請服務(wù)號。

并且這個(gè)申請和認(rèn)證盡量提前。微信公眾號有比較變態(tài)的授權(quán)策略，未經(jīng)認(rèn)證的公眾號，基本上啥都做不了。雖然微信又很“貼心”地提供了測試賬號，讓你可以測試所有的API，但這僅限于API；如果是進(jìn)行微信網(wǎng)頁開發(fā)，測試賬號同樣看不到效果。

二、公眾號與小程序

利用微信生態(tài)，是公眾號還是小程序呢？

最好是一起搞，兩個(gè)都要。如果只能選一個(gè)的話，選公眾號。

小程序雖然功能比公眾號強(qiáng)，但事實(shí)上，小程序能做的，公眾號也能通過開發(fā)微信網(wǎng)頁，然后在菜單里鏈接做到同樣的效果，只是稍為麻煩而已。但是，如果我們應(yīng)用系統(tǒng)想發(fā)送消息給微信用戶的話，必須擁有一個(gè)公眾號，因?yàn)橄⒛０逵晒娞柼峁Ｐ〕绦蛟疽部梢元?dú)自發(fā)模板消息，但現(xiàn)在微信政策變了，只能用公眾號的消息模板，并且改名叫“統(tǒng)一服務(wù)消息”。

再有是公眾號本質(zhì)上是微信用戶的聯(lián)系人，一旦關(guān)注嗎，就好像張三李四一樣出現(xiàn)在微信用戶的朋友列表里，而小程序只能到微信的“發(fā)現(xiàn)”里搜。作為便捷入口，公眾號要強(qiáng)于小程序。公眾號另一個(gè)優(yōu)點(diǎn)是發(fā)布文章，有引流效果。

公眾號還有一個(gè)優(yōu)勢，就是認(rèn)證過的服務(wù)號，還可以免費(fèi)開通一個(gè)小程序，并且無須認(rèn)證。相當(dāng)于買一送一。

三、公眾號業(yè)主與開發(fā)人員通常不是同一批人，如何開發(fā)？

開發(fā)過程中，各種設(shè)置，包括版本發(fā)布，頻頻需要微信掃碼。一般是管理員掃。問題是，管理員是業(yè)主，他們一般不負(fù)責(zé)開發(fā)，如果讓他們經(jīng)常掃碼，不現(xiàn)實(shí)，甚至不可能，因?yàn)橛锌赡芩诋惖亍?/p>

這時(shí)候，可以讓管理員將開發(fā)人員添加為經(jīng)營賬號，并且是長期的。這樣大部分的操作都可以由開發(fā)人員完成，代為管理。

四、小程序發(fā)布

公眾號沒有發(fā)布一說，它是通過微信管理后臺(tái)進(jìn)行管理，它像微信提供的現(xiàn)成應(yīng)用軟件。

而小程序真的就是我們動(dòng)手寫代碼開發(fā)的。但它的部署跟我們平時(shí)開發(fā)的軟件部署不一樣。一般我們部署軟件，要有一臺(tái)服務(wù)器，不管是虛擬服務(wù)器還是物理服務(wù)器，總之要有服務(wù)器，安裝配置好環(huán)境，然后將發(fā)布軟件部署于其中。小程序不一樣，它直接運(yùn)行于微信，部署方式是上傳代碼。流程具體為：微信開發(fā)者工具上傳代碼 -，小程序管理后臺(tái)的版本管理中提交審核，審核通過以后發(fā)布，即可更新。

我認(rèn)為該種發(fā)布方式即為傳說中的Serveless。Serveless又叫FaaS，函數(shù)即服務(wù)。這里說的函數(shù)，不是我們程序中一段段代碼這種函數(shù)。我懷疑所謂的函數(shù)是“功能“的誤譯。比如，一個(gè)小程序項(xiàng)目就是一個(gè)“函數(shù)”。

五、小程序開發(fā)中的自定義組件及類庫

小程序跟VUE非常相像。主體都是js，也有頁面、樣式，也是采用MVVM模型。基本上，只要做過VUE開發(fā)，小程序很快就能上手。

VUE最基本的結(jié)構(gòu)是組件。組件可以提高封裝性、復(fù)用性。封裝性意味著獨(dú)立性，低耦合，然后意味著易.擴(kuò)展，易維護(hù)。好處多多。小程序也支持組件，另外還有一個(gè)東東叫行為（behavior）。

小程序的組件類似VUE組件，有模板，樣式，JS；而所謂的行為，則是JS類庫。小程序基本結(jié)構(gòu)是頁面、組件、行為（我瞎掰的）。

1、組件示例
這是一個(gè)行政區(qū)域選擇組件citys。

1）模板

<!--modules/citys.wxml--> <picker bindchange="bindCityChange" value="{{cityI}}" range="{{citys}}"><view class="-city-picker">區(qū)域：{{citys[cityI]}}</view> </picker>

2）JS

// modules/citys.js const app = getApp(); const server = app.config.server;//自定義的屬性，可忽略Component({/*** 組件的屬性列表，公有*/properties: {all: {type: String,value: '全部'}},data: {citys: [],cityI: 0},ready() {const that = this;getDataFromDb(that);},/*** 組件的方法列表*/methods: {bindCityChange: function (e) {this.setData({cityI: e.detail.value})this.triggerEvent('cityChange', this.data.citys[e.detail.value])},} })function getDataFromDb(that) {wx.request({url: server + '/api/sys/field/queryByKey/city',success(res) {const objs = res.data.fieldList;let citys = [that.data.all];for (let c in objs) {citys.push(objs[c].vtext)}that.setData({ citys: citys });}}); }

3）json

// modules/citys.js {"component": true,"usingComponents": {} }

4）樣式
忽略不提

【調(diào)用示例】
1）index.json

{"usingComponents": {"city-picker": "../../../modules/citys"} }

2）index.wxml

<view class="city-picker"><city-picker id="city-picker1" all="--請選擇--" bind:cityChange="onCityChange" /></view>

3）index.js

Page({data: {city: '三亞'},onCityChange(e) {const city = e.detail;if (city.indexOf('請選擇') >= 0) {return;}this.setData({city: city})。。。//為所欲為} });

2、行為示例
這是登錄處理邏輯代碼。只有JS，

//modules/login.js const sLoginKey = 'user'module.exports = {isLogin() {return wx.getStorageSync(sLoginKey)},isBind() {//是否已經(jīng)綁定自有系統(tǒng)用戶const user = this.getUser()return (user.userId)},getUser() {return wx.getStorageSync(sLoginKey)},getInfo() {return this.getUser()},logout(callback) {_logout(callback)},setUser(user) {wx.setStorageSync(sLoginKey, user)} }function _logout(callback) {if (callback) {wx.removeStorage({key: sLoginKey,success(res) {console.log(res)callback()}})} else {try {wx.removeStorageSync(sLoginKey)} catch (e) {console.log('登出失敗：')console.log(e)}} }

【調(diào)用示例】

const loginHandler = app.require('./modules/login.js')Page({data: {user: {},},onLoad() {if (!loginHandler.isLogin()) {//未登錄wx.reLaunch({ url: 'login?b=user' })return}if (!loginHandler.isBind()) {//未綁定微信賬號wx.reLaunch({ url: 'bind' })return}const user = loginHandler.getUser()this.setData({user: user})。。。//為所欲為}, })

六、小程序地圖開發(fā)

小程序本身提供了地圖開發(fā)，也可以用<web-view>嵌入地圖網(wǎng)頁的方式。小程序地圖對手機(jī)的支持較好，但功能較弱，想在地圖上做一些繪制基本不可能，比如繪制臺(tái)風(fēng)啥的。但嵌入網(wǎng)頁雖然可以解決繪制的問題，不過需要解決屏幕自適應(yīng)問題，而且也不會(huì)有微信用戶當(dāng)前位置功能。

開發(fā)入門（一）：
微信公眾號開發(fā)入門
微信小程序入門

總結(jié)

以上是生活随笔為你收集整理的微信公众号及小程序开发入门（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。