微信公众号及小程序开发入门(代码片段)

关键词：

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

一、服务号

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

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

如何入门微信小程序开发(代码片段)

最近微信开发小程序挺火的，自己选择了腾讯云官方推出的相册。先下载：破解版IDE下载地址，以及使用说明：http://download.csdn.net/detail/richard_jason/9660819http://download.csdn.net/detail/richard_jason/9660821这里由于csdn有上传... 查看详情

微信小程序开发入门介绍-布局组件(代码片段)

在小程序开发中比较重要的就是布局了。所谓的布局是依据美工提供的设计稿，按照工具提供的各类组件进行实现。小程序中我们常用的布局组件是view。通过布局组件就可以实现我们想要的效果。布局组件的添加我们还是使... 查看详情

10分钟入门微信小程序开发：从环境搭建到开发出第一个程序。(代码片段)

小程序简介小程序是一种不需要下载安装即可使用的快速应用，它实现了应用“触手可及”的操作；用户扫一扫或搜一下即可打开应用，完全不需要安装，因此小程序不仅可提高的用户的应用体验，也方便应用的传扩散。... 查看详情

分享《微信小程序开发图解案例教程》pdf及代码+《微信小程序开发入门及案例详解》pdf及代码

...xQzq9I9g0g更多分享：https://pan.baidu.com/s/1g4hv05UZ_w92uh9NNNkCaA《微信小程序开发图解案例教程》PDF及代码+《微信小程序开发入门及案例详解》PDF及代码《微信小程序开发图解案例教程》PDF，356页，带书签目录；配套源代码。采用图、... 查看详情

微信小程序开发入门与实战（数据监听）(代码片段)

@作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃 查看详情

微信小程序开发入门与实战（数据监听）(代码片段)

@作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃 查看详情

微信小程序开发入门篇(代码片段)

✍、目录配套视频教程：B站直达微信小程序🔥地址微信小程序开发入门篇(一)🔥https://blog.csdn.net/Augenstern_QXL/article/details/121489385微信小程序开发入门篇(二)🔥https://blog.csdn.net/Augenstern_QXL/article/details/121620224微信小... 查看详情

微信小程序开发(代码片段)

创建自己的微信小程序开发账号1.首先登录微信公众平台https://mp.weixin.qq.com/点击注册账号，按照提示完成需要填写的信息，并登录2.进入开发（1）在首页的左边的导航栏中，找到开发中的开发工具，进入微... 查看详情

微信小程序开发零基础入门(代码片段)

✍、目录微信小程序✍、目录1、微信小程序1.1、官方开发者工具1.2、小程序结构目录1.3、小程序配置1.3.1、全局配置app.json1.3.1.1、entryPagePath1.3.1.2、pages1.3.1.3、window1.3.1.4、tabBar1.3.1.5、debug1.3.2、页面配置：页面名称.json1.3.3、s... 查看详情

微信小程序开发入门教程

　　做任何程序开发要首先找到其官方文档，微信小程序目前还在邀请内测阶段，目前官方放出了部分开发文档，经过笔者一天的查看和尝试，感觉文档并不全面，但是通过这些文档已经能够看出其大概面貌了。闲话不多说，我... 查看详情

微信小程序开发上线注意事项(代码片段)

微信小程序开发上线注意事项记录微信小程序开发及上线过程中需要注意的一些事项。一、准备工作1.抢注小程序名称只要想好要开发小程序后，就应该立刻进行小程序账号和名称的注册。及时验证小程序名称是否符合要求&#... 查看详情

微信小程序开发入门教程-小程序账号注册及开通(代码片段)

17年小程序开始公测，经过5年的发展，无论从组件、开发工具、api、生态、社区，都已经发展的非常成熟了。如果17年年初你看小程序，觉得无需安装即用即走还是一个理念的话。站在今天看过去，往往是先提... 查看详情

微信小程序开发入门教程-小程序账号注册及开通(代码片段)

17年小程序开始公测，经过5年的发展，无论从组件、开发工具、api、生态、社区，都已经发展的非常成熟了。如果17年年初你看小程序，觉得无需安装即用即走还是一个理念的话。站在今天看过去，往往是先提... 查看详情

最全教程：微信小程序开发入门详解(代码片段)

笔者由于工作需要，曾经参加过一个微信小程序同SAP系统集成的项目，因此从零开始学习了微信小程序的开发知识。这里通过系列文章把自己所学分享出来，希望对相关学习者有所帮助。步骤1：微信小程序的申请... 查看详情

个人微信小程序开发入门教程:注册个人小程序

学习开发微信小程序最最最最重要的就是学习微信小程序官方文档,因为文档可以解决我们在学习过程中遇到的大部分麻烦，所以先附上官方文档链接：https://developers.weixin.qq.com/doc/(目录)一、进入微信公众平台官方网站如下：https... 查看详情

微信小程序开发零基础入门——微信小程序入门(代码片段)

微信小程序入门一、小程序介绍1.1.什么是小程序？1.2.微信⼩程序历史1.3.小程序可以干什么？1.4.疯狂的微信⼩程序1.5.还有其他的⼩程序不容忽视1.6.官⽅微信⼩程序体验二、小程序开发资料三、第⼀个微信⼩程序四、开... 查看详情

微信小程序开发目录

1.入门 查看详情

微信小程序开发（笔记）(代码片段)

微信小程序开发笔记一、微信小程序的结构1、初识小程序2、快捷键二、常用组件1.input组件2.button组件三、小程序中的函数1.函数的两种定义方法1.函数在本页面的调用2.带参函数2.js中的默认函数四、点击事件五、获取用户输入六... 查看详情