微信公众号及小程序开发入门（二）

开发过程中一些对微信公众号和小程序的认识。

一、服务号

在公众号开发入门一中提到，微信公众号分为订阅号和服务号，其中服务号功能最强，只准企业申请，并且要每年交300元认证费。如果企业想拥有自己的公众号的话，一般应该申请服务号。

并且这个申请和认证尽量提前。微信公众号有比较变态的授权策略，未经认证的公众号，基本上啥都做不了。虽然微信又很“贴心”地提供了测试账号，让你可以测试所有的API，但这仅限于API；如果是进行微信网页开发，测试账号同样看不到效果。

二、公众号与小程序

利用微信生态，是公众号还是小程序呢？

最好是一起搞，两个都要。如果只能选一个的话，选公众号。

小程序虽然功能比公众号强，但事实上，小程序能做的，公众号也能通过开发微信网页，然后在菜单里链接做到同样的效果，只是稍为麻烦而已。但是，如果我们应用系统想发送消息给微信用户的话，必须拥有一个公众号，因为消息模板由公众号提供。小程序原本也可以独自发模板消息，但现在微信政策变了，只能用公众号的消息模板，并且改名叫“统一服务消息”。

再有是公众号本质上是微信用户的联系人，一旦关注吗，就好像张三李四一样出现在微信用户的朋友列表里，而小程序只能到微信的“发现”里搜。作为便捷入口，公众号要强于小程序。公众号另一个优点是发布文章，有引流效果。

公众号还有一个优势，就是认证过的服务号，还可以免费开通一个小程序，并且无须认证。相当于买一送一。

三、公众号业主与开发人员通常不是同一批人，如何开发？

开发过程中，各种设置，包括版本发布，频频需要微信扫码。一般是管理员扫。问题是，管理员是业主，他们一般不负责开发，如果让他们经常扫码，不现实，甚至不可能，因为有可能他在异地。

这时候，可以让管理员将开发人员添加为经营账号，并且是长期的。这样大部分的操作都可以由开发人员完成，代为管理。

四、小程序发布

公众号没有发布一说，它是通过微信管理后台进行管理，它像微信提供的现成应用软件。

而小程序真的就是我们动手写代码开发的。但它的部署跟我们平时开发的软件部署不一样。一般我们部署软件，要有一台服务器，不管是虚拟服务器还是物理服务器，总之要有服务器，安装配置好环境，然后将发布软件部署于其中。小程序不一样，它直接运行于微信，部署方式是上传代码。流程具体为：微信开发者工具上传代码 -，小程序管理后台的版本管理中提交审核，审核通过以后发布，即可更新。

我认为该种发布方式即为传说中的Serveless。Serveless又叫FaaS，函数即服务。这里说的函数，不是我们程序中一段段代码这种函数。我怀疑所谓的函数是“功能“的误译。比如，一个小程序项目就是一个“函数”。

五、小程序开发中的自定义组件及类库

小程序跟VUE非常相像。主体都是js，也有页面、样式，也是采用MVVM模型。基本上，只要做过VUE开发，小程序很快就能上手。

VUE最基本的结构是组件。组件可以提高封装性、复用性。封装性意味着独立性，低耦合，然后意味着易.扩展，易维护。好处多多。小程序也支持组件，另外还有一个东东叫行为（behavior）。

小程序的组件类似VUE组件，有模板，样式，JS；而所谓的行为，则是JS类库。小程序基本结构是页面、组件、行为（我瞎掰的）。

1、组件示例
这是一个行政区域选择组件citys。

1）模板

<!--modules/citys.wxml-->
<picker bindchange="bindCityChange" value="{{cityI}}" range="{{citys}}"><view class="-city-picker">区域：{{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）样式
忽略不提

【调用示例】
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() {//是否已经绑定自有系统用户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)}}
}

【调用示例】

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})。。。//为所欲为},
})

六、小程序地图开发

小程序本身提供了地图开发，也可以用<web-view>嵌入地图网页的方式。小程序地图对手机的支持较好，但功能较弱，想在地图上做一些绘制基本不可能，比如绘制台风啥的。但嵌入网页虽然可以解决绘制的问题，不过需要解决屏幕自适应问题，而且也不会有微信用户当前位置功能。

开发入门（一）：
微信公众号开发入门
微信小程序入门