微信公众号及小程序开发入门（二）
2023/7/19 9:00:00 【次浏览】 本站
开发过程中一些对微信公众号和小程序的认识。
一、服务号
在公众号开发入门一中提到，微信公众号分为订阅号和服务号，其中服务号功能最强，只准企业申请，并且要每年交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>嵌入地图网页的方式。小程序地图对手机的支持较好，但功能较弱，想在地图上做一些绘制基本不可能，比如绘制台风啥的。但嵌入网页虽然可以解决绘制的问题，不过需要解决屏幕自适应问题，而且也不会有微信用户当前位置功能。
手机扫码查看当前文章：