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

Posted 2022-06-02 左直拳

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

一、服务号

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

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