微信小程序代码编写
微信小程序是运行在微信上面的小程序，不需要安装，相比于Android与IOS应用而言，开发难度更简单，并且在两个平台下都可以运行，所以选择使用微信小程序来控制我们的硬件设备在合适不过。因为我更擅长硬件一点，所以小程序的代码只是用别人的例程修改修改，最后实现自己想要的功能。
首先 需要引入mqtt.js库，供后续调用，我把业务逻辑代码，放到了app.js里面，主要是由于我有两个页面，这两个页面都需要通过连接mqtt服务端，向主题发布消息，和获取主题的消息。写在app.js里面就不需要在几个页面的逻辑代码里面写几次关于连接服务端的代码了。在这之前还要注意微信公众平台域名信息中已经填好了自己已经备案的域名。



下面是代码：
import mqtt from "utils/mqtt.js" //mqtt.js放在utils目录，引入文件
const host =
  'wxs://www.domain.com/mqtt';  //填写自己的服务端地址
var client=null;
App({

  data:{
    reconnectCounts: 0,
    live: '../../images/liveoff.png',
    temperatrue:20,
    humidity:40,    
    options: {
      protocolVersion: 4, //MQTT连接协议版本
      clientId: 'wechat',
      clean: true,
      password: 'public',
      username: 'admin',
      reconnectPeriod: 1000, //1000毫秒，两次重新连接之间的间隔
      connectTimeout: 30 * 1000, //1000毫秒，两次重新连接之间的间隔
      resubscribe: true, //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
      reconnect: true,
    }
  },
  //连接服务端
  connectServer: function (that) {    
   var that=that;
    //开始连接
    client = mqtt.connect(host, this.data.options);
    client.on('connect', function (connack) {
      client.subscribe('Topic1', function (err, granted) {//订阅主题，用来接收STM32的数据
        if (!err) {
          wx.showToast({
            title: '服务器连接成功'
          })
        } else {
          wx.showToast({
            title: '服务器连接失败',
            icon: 'fail',
            duration: 2000
          })
        }
      })

      if (client && client.connected) { //连接成功后发送STM32在线询问
        client.publish('Topic0', '{"src":"wx","des":"stm32","msg":{"type":"ask","which":"stm32","content":"?"}}');
      } else {
        wx.showToast({
          title: '服务器未连接',
          icon: 'warn',
          duration: 2000
        })
      }
    }),
    client.on("reconnect", function () { //客户端重连触发
      client.subscribe('Topic1', function (err, granted) {
        if (!err) {
          wx.showToast({
            title: '服务器连接成功'
          })

        } else {
          wx.showToast({
            title: '服务器连接失败',
            icon: 'fail',
            duration: 2000
          })
        }
      })        

    }),
    client.on("offline",function(){ //客户端脱机时触发，防止客户端连接断开
      client.reconnect();
      console.log("reconnect!!!");
    })

  },
  publishMsg:function(cmd){  //发布消息
    if (client && client.connected) {
      client.publish('Topic0', cmd);
    } else {
      wx.showToast({
        title: '服务器未连接',
        icon: 'warn',
        duration: 2000
      })
    }    
  },
	//更新页面
  updata:function(that){  
    //服务器下发消息的回调
    client.on("message", function (topic, payload) {
      var pay = payload.toString();  //将数据转换成字符串
      if(pay.charAt(0)=='{'){   //如果是JSON数据
      var msg = JSON.parse(payload);          //解析JSON数据
      //console.log(msg);
      if (msg.msg.content == "ok") { //收到STM32在线的消息
        that.setData({
          start: 'start',  //点击图片触发的事件
          live: '../../images/liveon.png', //替换图片为在线
        })
        wx.showToast({
          title: '设备已上线', 
          icon: 'success',
          duration: 2000
        })
        return 1
      }
    
      if (msg.msg.which == "temperature") {
        that.setData({
          temperatrue: msg.msg.content  //显示出温度
        })
      }
      if (msg.msg.which == "humidity") {
        that.setData({
          humidity: msg.msg.content    //显示出温度
        })
      }
      }
    })
  },
})

然后 首页的设计，当设备不在线时，设备显示灰色，点击设备会提示设备不在线。设备在线时，图标显示为黄色，点击即跳转到控制页面。


index.js
var initData='关';
var main_view;
var app = getApp();
Page({
  data: {
    text: initData,
    start: 'warn',
    live: '../../images/liveoff.png',
  },

  onLoad: function (options) {
    app.connectServer(this);
    app.updata(this);
  },

  start:function(e){
    wx.navigateTo({
      url: '../console/console',
    })
  },

  warn:function(e){
    wx.showToast({
      title: '设备未上线',
      icon: 'warn',
      duration: 2000
    })   
  },
})

index.wxml
<view>
  <view class="main" bindtap="{{start}}" hover-class="hover">
  <image src="{{live}}" class="img"></image>
  <text>设备一</text>
  </view>
</view>

然后 是控制台页面，进入页面获取温湿度数据，然后显示出来，点击图标可以实现对STM32的LED灯的控制。


console.js
const app=getApp();
Page({
  data: {
    ledStatu:"off",
    led: '../../images/dark.png',
    text:"关",
    temperatrue:20,
    humidity:40,
  },

  onLoad: function (options) {
    app.updata(this);
    app.publishMsg('{"src":"wx","des":"stm32","msg":{"type":"ask","which":"data","content":"?"}}');
  },
  onoff:function(){
    if(this.data.ledStatu=="off"){
      app.publishMsg('{"src":"wx","des":"stm32","msg":{"type":"ctrl","which":"led0","content":"on"}}');
      this.setData({
        led: '../../images/light.png',
        ledStatu:"on",
        text: "开",
      })
    }else{
      app.publishMsg('{"src":"wx","des":"stm32","msg":{"type":"ctrl","which":"led0","content":"off"}}');
      this.setData({
        led: '../../images/dark.png',
        ledStatu: "off",
        text: "关"
      })      
    }
  },
  
})

console.wxml
<view>
  <view>
    <image src="{{led}}" class="img" bindtap="onoff"></image>
    <text>{{text}}</text>
  </view>
  <view>温度：{{temperatrue}}</view>
  <view>湿度：{{humidity}}</view>
  <view> 
  </view>
</view>


最后 这个系统中微信小程序还存在一些问题，比如

第一：与服务端连接存在掉线的问题

第二：在小程序停留在首页时，若ESP8266下线了，不能更新页面中的状态

第三：在首次读取湿度数据时存在与STM32显示不符的情况，但经过自动更新后就恢复正常了。

后续如果有所优化会更新。
参考了这位大佬的代码：

https://blog.csdn.net/xh870189248/article/details/84231666

其中附有源码，我也是在这基础上修改的。
个人能力有限，有什么错误的地方欢迎指正，有问题也可以提，可以一起探讨

没有灵魂的微信小程序代码转支付宝小程序代码
微信小程序与支付宝小程序
直面代码的替换内容
功能快捷键

微信小程序与支付宝小程序
作为一个微信小程序的半新手，支付宝小程序的全新手！ 在公司安排的这次任务中，需要把已经上线的支付宝小程序更新为和微信小程序一样的版本。就只有打开微信和支付宝的开发者对比两个版本的差异然后改改改了。如果是完全生成一个支付宝小程序项目，可参考：https://jingyan.baidu.com/article/a948d651c3ae330a2ccd2e77.html
以下仅为个人要修改项目中所遇到的总结，如果没有你想知道的就还是去对比文档吧。这是本人第一次写博客，有错误的或者要添加的请大家多多指点
微信小程序开发文档地址：https://developers.weixin.qq.com/miniprogram/dev/

支付宝小程序开发者文档地址：https://docs.alipay.com/mini/developer/getting-started
直面代码的替换内容
两个小程序大体都是一样的，要修改的不过于有引用的组件名称，页面渲染的指令，点击事件的名称，调用的API等。如果是版本更新，只修改部分页面。一定要记得检查新增的页面，图片等。是否有的没有添加。


引用文件的名字 ：把页面中的wxml改为axml；wxss改为acss


AXML中的修改：选中所有的wx：替换为a：

（1）在axml搜索bind；将bindTap替换为onTap，catchtap替换为catchTap。

（2）一些常用组件的事件名称或属性如：scroll-view的bindscrolltolower替换为onScrollToLower，bindscrolltolower替换为onScrollToUpper。picker的bindchange替换为onChanges。checkbox的bindchange替换为onChange。form表单的bindsubmit，bindreset，form-type改为onSubmit，onReset，formType 。

（3）常见规律是把bind替换为on，然后是以驼峰式命名。可以搜索bind进行查看。别的组件我没有一一列出来。项目有用到的话可以对照文档进行修改。


js的修改：js中所有的wx.替换为my.

（1） API名称或属性：showToast弱提示框，内容属性title替换成content。makePhoneCall拨打电话的参数phoneNumber替换成number。微信小程序设置导航栏API分别对应有wx.setNavigationBarTitle，wx.setNavigationBar，wx.setNavigationBarColor等，支付宝是在一个API中my.setNavigationBar通过入参进行修改。

（2）图片的API：在选择图片chooseImage成功后返回的参数由tempFilePaths替换成apFilePaths。对图片进行压缩compressImage中。

微信的对应的参数为：

支付宝对应参数为：

（3）支付的API：在验证支付是否成功时。

微信对应返回： 官方文档地址：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5

支付宝对应返回:

官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/wx.requestPayment.html

发起支付的api名称和参数时完全不同的，详情见连接。

（4）内置地图选择地理位置的chooseLocation:调用这个api肯定是需要用户先授权的。(如果用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意后方可调用接口；如果用户已授权，可以直接调用接口；如果已经拒绝授权的话就需要调用wx.openSetting 引导开启授权)

对于支付宝来说，我也不知为何是可以直接调用的，不用重新引导授权之类的。它也不像微信，在一次申请用户授权后就需要调用openSetting 重新授权。官方文档中也没找到openSetting 这个API。有一个权限引导的my.showAuthGuide。但是里面对应不同设备权限不同。这个有大神知道的希望指点一二。

值得注意的是，在手机微信小程序中获取位置时有一个常用位置。选择这条地理位置返回的信息与别的位置返回数据是不同的（可能没有省市区）。需要用经纬度重新获取详细地址。 支付宝小程序的位置选择在开发者工具中返回参数是文档所写那样，但是在手机上参数是如此返回的。

因此，最好用手机打开调试器，输出看一下。并且尤为重要的是Ios和Androidos常用位置返回参数信息是不同的。


以上是在个人项目中所遇到的总结，大家可以先替换文件内容，直到页面不报错。在查看页面功能，有问题再对应文档进行比较。只是支付宝的文档着实差一点。等熟悉文档大致内容后和真机一起调试就不会再那么迷惑啦。
功能快捷键
选中所有匹配项：Ctrl+shift + L

选中下一个匹配项：Ctrl + D

查询：Ctrl + F

 
最全的微信小程序代码大全

微信小程序官方Demo(Hao-Wu/WeApp-Demo)
微信小应用示例代码(phodal/weapp-quick)
微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo)
微信小应用- 掘金主页信息流(hilongjw/weapp-gold)
微信小程序（应用号）示例：微信小程序豆瓣电影(zce/weapp-demo)
微信小程序-豆瓣电影(hingsir/weapp-douban-film)
小程序 hello world 尝鲜(kunkun12/weapp)
微信小程序版2048小游戏(natee/wxapp-2048)
微信小程序-微票(wangmingjob/weapp-weipiao)
微信小程序购物车DEMO(SeptemberMaples/wechat-weapp-demo)
微信小程序V2EX(jectychen/wechat-v2ex)
微信小程序-知乎日报(myronliu347/wechat-app-zhihudaily)
微信小程序-公众号热门文章信息流(hijiangtao/weapp-newsapp)
微信小程序版Gank客户端(lypeer/wechat-weapp-gank)
微信小程序集成Redux实现的Todo list(charleyw/wechat-weapp-redux-todos)
微信小程序集成 LeanCloud 实现的 Todo list(leancloud/leantodo-weapp)
微信小程序-番茄时钟(kraaas/timer)
微信小程序项目汇总
微信小程序版聊天室(ericzyh/wechat-chat)
微信小程序-HiApp(BelinChung/wxapp-hiapp)
小程序Redux绑定库(charleyw/wechat-weapp-redux)
微信小程序版微信(18380435477/WeApp)
小程序开发从布局开始(hardog/wechat-app-flexlayout)
微信小程序-音乐播放器(eyasliu/wechat-app-music)
微信小程序-简易计算器-适合入门（dunizb/wxapp-sCalc）
微信小程序-github(zhengxiaowai/weapp-github)
微信小程序-小熊の日记(harveyqing/BearDiary)
微信小程序(Seahub/PigRaising)
微信小程序(WeChatMeiZhi妹子图)
微信小程序快速开发骨架
微信小程序 - Artand 最专业的艺术设计平台
微信小程序 - 开心一刻(zhijieeeeee/wechat-app-joke)
微信小程序 - GitHubFeed(uniquexiaobai/wechat-app-githubfeed)
微信小程序 - 国外摄影社区500px(fluency03/weapp-500px)
微信小程序 - 巴爷供销社－电商平台(bayetech)
基于微信小程序的UI库（Wa-UI）
微信小程序-豆瓣美女/妹子图(weapp-girls)
微信小程序-美女模特(BeautifulGirl)
微信小程序 - 知乎仿写(RebeccaHanjw/weapp-wechat-zhihu)
微信小程序 - 面包旅行(romoo/weapp-demo-breadtrip)
微信小程序-淘票票(weapp-film)
微信小程序-仿ONE(ahonn/weapp-one)
微信小程序-新闻阅读器(vace/wechatapp-news-reader)
微信小程序 - 百思不得姐(Symous/WechatApp-BaisiSister)
微信小程序 - We重邮(lanshan-studio/wecqupt)
微信小程序 - IOS计算器
微信小程序 - github简历(monkindey/wx-github)
微信小程序-程序员老黄历(xujinyang/CoderCalendar-WeApp)
微信小程序 - TODOS（任务清单）(zce/weapp-todos)
微信小程序 - 企业宣传小程序(yaoshanliang/weapp-ssha)




微信小程序实例源码大全下载
微信小应用示例代码(phodal/weapp-quick)
源码链接：https://github.com/phodal/weapp-quick

微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo)
源码链接：https://github.com/giscafer/wechat-weapp-mapdemo

微信小应用- 掘金主页信息流(hilongjw/weapp-gold)
源码链接：https://github.com/hilongjw/weapp-gold

微信小程序（应用号）示例：微信小程序豆瓣电影(zce/weapp-demo)
源码链接：https://github.com/zce/weapp-demo

微信小程序-豆瓣电影(hingsir/weapp-douban-film)
源码链接：https://github.com/hingsir/weapp-douban-film

小程序 hello world 尝鲜(kunkun12/weapp)
源码链接：https://github.com/kunkun12/weapp

使用微信小程序开发2048游戏(sammffl/wechat-weapp-2048)
源码链接：https://github.com/sammffl/wechat-weapp-2048

微信小程序-微票(wangmingjob/weapp-weipiao)
源码链接：https://github.com/wangmingjob/weapp-weipiao

微信小程序购物车DEMO(SeptemberMaples/wechat-weapp-demo)
源码链接：https://github.com/SeptemberMaples/wechat-weapp-demo

微信小程序V2EX(jectychen/wechat-v2ex)
源码链接：https://github.com/jectychen/wechat-v2ex

微信小程序-知乎日报(myronliu347/wechat-app-zhihudaily)
源码链接：https://github.com/myronliu347/wechat-app-zhihudaily

微信小程序-公众号热门文章信息流(hijiangtao/weapp-newsapp)
源码链接：https://github.com/hijiangtao/weapp-newsapp

微信小程序版Gank客户端  
源码链接：https://github.com/lypeer/wechat-weapp-gank

微信小程序集成Redux实现的Todo list  
源码链接：https://github.com/charleyw/wechat-weapp-redux-todos

微信小程序-番茄时钟  
源码链接：https://github.com/kraaas/timer

微信小程序项目汇总  
源码链接：http://javascript.ctolib.com/cat … t-wechat-weapp.html

微信小程序版聊天室  
源码链接： https://github.com/ericzyh/wechat-chat

微信小程序-HiApp  
源码链接： https://github.com/BelinChung/wxapp-hiapp

小程序Redux绑定库  
源码链接： https://github.com/charleyw/wechat-weapp-redux

微信小程序版微信
源码链接：  https://github.com/18380435477/WeApp

小程序开发从布局开始
源码链接：  https://github.com/hardog/wechat-app-flexlayout

微信小程序-音乐播放器 
源码链接： https://github.com/eyasliu/wechat-app-music

微信小程序-简易计算器-适合入门
源码链接： https://github.com/dunizb/wxapp-sCalc

微信小程序-github 
源码链接：  https://github.com/zhengxiaowai/weapp-github

微信小程序-小熊の日记 
源码链接：  https://github.com/harveyqing/BearDiary

微信小程序
源码链接： https://github.com/SeaHub/PigRaising

微信小程序(WeChatMeiZhi妹子图)
源码链接：https://github.com/brucevanfdm/WeChatMeiZhi

使用方法

1、克隆项目代码到本地（git应该都要会哈，现在源码几乎都会放github上，会git才方便，不会的可以自学一下哦，不会的也没关系，gitHub上也提供直接下载的链接）
2、打开微信开发者工具；
3、添加项目->选择本项目目录->编译执行；
文章来源：
 http://blog.csdn.net/Nieyuwen/article/details/78845592

微信小程序官方Demo(Hao-Wu/WeApp-Demo)
微信小应用示例代码(phodal/weapp-quick)
微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo)
微信小应用- 掘金主页信息流(hilongjw/weapp-gold)
微信小程序（应用号）示例：微信小程序豆瓣电影(zce/weapp-demo)
微信小程序-豆瓣电影(hingsir/weapp-douban-film)
小程序 hello world 尝鲜(kunkun12/weapp)
微信小程序版2048小游戏(natee/wxapp-2048)
微信小程序-微票(wangmingjob/weapp-weipiao)
微信小程序购物车DEMO(SeptemberMaples/wechat-weapp-demo)
微信小程序V2EX(jectychen/wechat-v2ex)
微信小程序-知乎日报(myronliu347/wechat-app-zhihudaily)
微信小程序-公众号热门文章信息流(hijiangtao/weapp-newsapp)
微信小程序版Gank客户端(lypeer/wechat-weapp-gank)
微信小程序集成Redux实现的Todo list(charleyw/wechat-weapp-redux-todos)
微信小程序集成 LeanCloud 实现的 Todo list(leancloud/leantodo-weapp)
微信小程序-番茄时钟(kraaas/timer)
微信小程序项目汇总
微信小程序版聊天室(ericzyh/wechat-chat)
微信小程序-HiApp(BelinChung/wxapp-hiapp)
小程序Redux绑定库(charleyw/wechat-weapp-redux)
微信小程序版微信(18380435477/WeApp)
小程序开发从布局开始(hardog/wechat-app-flexlayout)
微信小程序-音乐播放器(eyasliu/wechat-app-music)
微信小程序-简易计算器-适合入门（dunizb/wxapp-sCalc）
微信小程序-github(zhengxiaowai/weapp-github)
微信小程序-小熊の日记(harveyqing/BearDiary)
微信小程序(Seahub/PigRaising)
微信小程序(WeChatMeiZhi妹子图)
微信小程序快速开发骨架
微信小程序 - Artand 最专业的艺术设计平台
微信小程序 - 开心一刻(zhijieeeeee/wechat-app-joke)
微信小程序 - GitHubFeed(uniquexiaobai/wechat-app-githubfeed)
微信小程序 - 国外摄影社区500px(fluency03/weapp-500px)
微信小程序 - 巴爷供销社－电商平台(bayetech)
基于微信小程序的UI库（Wa-UI）
微信小程序-豆瓣美女/妹子图(weapp-girls)
微信小程序-美女模特(BeautifulGirl)
微信小程序 - 知乎仿写(RebeccaHanjw/weapp-wechat-zhihu)
微信小程序 - 面包旅行(romoo/weapp-demo-breadtrip)
微信小程序-淘票票(weapp-film)
微信小程序-仿ONE(ahonn/weapp-one)
微信小程序-新闻阅读器(vace/wechatapp-news-reader)
微信小程序 - 百思不得姐(Symous/WechatApp-BaisiSister)
微信小程序 - We重邮(lanshan-studio/wecqupt)
微信小程序 - IOS计算器
微信小程序 - github简历(monkindey/wx-github)
微信小程序-程序员老黄历(xujinyang/CoderCalendar-WeApp)
微信小程序 - TODOS（任务清单）(zce/weapp-todos)
微信小程序 - 企业宣传小程序(yaoshanliang/weapp-ssha)