精华内容
下载资源
问答
  • 微信小程序主要目录和文件作用

    千次阅读 2019-09-18 10:25:02
    project.config.json 项目配置文件,做一些个性化配置,例如界面颜色、编译配置等等 app.json 当前小程序的全局配置,包括了小程序的所有...sitemap 配置小程序及其页面是否允许被微信索引 pages 里面包含一个个具...
    • project.config.json 项目配置文件,做一些个性化配置,例如界面颜色、编译配置等等
    • app.json 当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
    • sitemap 配置小程序及其页面是否允许被微信索引
    • pages 里面包含一个个具体的页面
    • wxss 页面样式,app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
    • app.js 小程序的逻辑
    • js 页面逻辑
    • json 页面配置
    • wxml 页面结构

    转载于:https://my.oschina.net/u/3913691/blog/3074335

    展开全文
  • pages文件夹,utils文件夹,全局文件app.js... 小程序入口文件,用于定义全局数据函数的使用,可以指定微信小程序的生命周期函数。 App.json文件: 对小程序进行配置,小程序的全局配置,小程序的所有页面路径、界
  • 谈谈微信小程序

    2020-06-24 19:13:15
    谈谈微信小程序 最近这段时间接触了微信小程序开发,也有一段时间没写博文了,也来写写简单的看法以及开发的部分问题与感想。 微信小程序,何方神圣? 有人可能会困惑微信小程序跟微信内嵌H5有什么区别? 其实如果你...

    谈谈微信小程序

    最近这段时间接触了微信小程序开发,也有一段时间没写博文了,也来写写简单的看法以及开发的部分问题与感想

    微信小程序,何方神圣?

    有人可能会困惑微信小程序跟微信内嵌H5有什么区别?
    其实如果你玩过微信小程序,你就能发现流畅度以及体验方面,小程序是完胜的本质其实就是hybrid(混合)的app介于web app与native 原生app之间,具备丰富的调用手机各种功能的接口,同时又具备灵活性,跨平台,维护成本也相当原生app较低,开发迭代速度也比较快
    放一张网上的图,可以看出这三者的区别

    在这里插入图片描述

    “操作系统中的操作系统,生态中的生态”

    有人这么评价小程序是“操作系统中的操作系统,生态中的生态”就像是微信里面又开了一个app store一样,然后里面的app跟着微信自定义的规则来编写,其实就是个微信操作系统中的app
    一开始我是拒绝的,微信搞了自己的一套基于原生的规范,还做了大量的限制,所以当时我并没有看好微信小程序,但是因为微信影响力的缘故,并且宣传做得太好了,朋友圈、社区等等各种爆炸新闻,热度、活跃度也非常高涨,各种《第一个小程序教程》《微信小程序入门指南》等等层出不穷,然后整理小程序教程的repos的star量都能达到几k,让人不由得想去探探小程序的究竟
    谈到生态的话,开放的时候,很多app很快就上线了相应的小程序,基本都是原生app功能性的弱化版,还有一些功能性较强的小应用之类的,比如什么亲戚计算器等等然而,有人就会想着,小程序是否会打击到原有app的流量以及下载,用户是否会直接放弃原有的app?做小程序的效果反而适得其反?这确实要引起开发者们的思考

    微信小程序,路在何方?

    过了刚开始的火热的阶段后,小程序就陷入一段低迷,很多人开始觉得它是鸡肋,只是微信巩固它本身的超级流量而诞生的跟公众号类似的内置应用罢了,流量难以转入本身的app,用户粘性也不高,正如小程序的特点“无须安装、触手可及、用完即走、无须卸载”
    其实接触过微信小程序后,发现有些东西其实是网上的误导或者自身的误解。
    先来看看上面的问题,小程序是否会打击到原有app的流量,其实这个问题很好解决,你只要看看这个应用跟用户的交互度的高低,如果存粹是一些小工具的话,功能相对单一的话,毋庸置疑,必然打击,我就简单举个例子,比如摩拜单车,我们其实只需要扫码用车,根本不需要别的东西,我为何还要下载一个app应用,但是类似其他用户交互度比较高的,比如滴滴出行,小程序功能就很简单,只能供用户简单使用,打到快车,但是原生应用上则功能较为丰富,用户往往不会卸载掉原生的app
    说到上面功能的阉割,既然小程序只是一些app应用的弱化版简化版,那小程序有何作用,它能带来什么收益?
    曾经我也觉得它很鸡肋,但是随着最近小程序开发团队的频繁能力升级以及自己的接触,仿佛看到了小程序是一块尚未挖掘开的巨大市场。
    首先是微信小程序的能力升级,先是开放个人开发者,然后公众号支持添加转发,再然后开放群相关能力,小程序码以及数据分析能力也相应开放,着实让人看到微信小程序背后开发团队的活跃以及微信相关方面的重视,一些能力的升级让小程序的推广能力更强,让开发者有更大的权限去拿到用户关系以及一些用户信息,让体验更好。

    在这里插入图片描述
    其次是「匿名聊聊」小程序带来的启发,匿名聊聊通过小程序码在朋友圈推广,可以跟分享小程序的朋友匿名聊天,瞬间刷爆朋友圈,有消息透露,它四小时访问量高达40万,虽然因为微信不允许这种“影响朋友圈”的行为,最后被说由于“诱导分享“暂停服务了,但是我们从这里可以看到小程序的强大影响力以及在社交关系上的强大优势,在这个移动互联网的时代,微信基本已经成为流量主体入口(根据questmobile数据,微信日活已经到达6亿),微信一方面利用小程序来巩固自己的流量超级入口地位,我们何尝不可以利用它的流量以及实体用户来给自己带来红利,就类似匿名聊聊这类的,正常用户很少会去下载这样的app,这就跟陌生交友这些类似了,但是在微信这个载体下就不一样了,用户身份是相对有保证的,用户通过微信入口进入你的应用,通过微信用户之间的关系就可以做很多事情了,也可以选择跟本身app用户连动,来使得用户留存
    但是值得注意的是,并不是所有小程序都能享受到微信流量的红利,如果只是单纯做一个app简化版的小程序,又有何用,用户无法看到你开发的微信小程序的优势和方便所在,做不到吸引用户,用户就只会放弃你的产品,个人觉得,小程序不应该是所谓的“用完即走”,而是“用完很爽,下次还来”,打造一个精心制作的应用,利用微信小程序带来的社交以及流量的优势打造一个与原有app有所不同但是可以看到用心制作的精致小程序,这样用户用完对产品认可,完全可以唤醒产品的更多用户,不过,这就需要去试验以及推敲,像「匿名聊聊」这种打着用户心理将小程序玩成爆款的就是一个很好的例子

    关于开发微信小程序的感受

    微信开发者工具在这里插入图片描述
    微信提供了自己的开发者工具(支持保存编译,ES5转ES6,压缩代码等),反正从发布到现在也迭代好多版本了,目前直接使用它的编辑器开发觉得还可以,没遇到很大的坑,调试工具中css部分没有盒子模型、computed style之类的这点还有待提高
    小程序开发框架

    对于小程序开发框架,文档是这么写的
    小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
    框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。

    小程序也的确实现了现代前端框架的数据与视图绑定的特点,而不是dom的形式,但是它最大的缺点是缺少自定义组件化的特点,虽然框架中提供了import/include,还有template,还有它内置的组件,这些可以提供js模块化,还有wxml模板之类,但是远远达不到我们想要的,小程序很大程度跟vue很接近,包括一些绑定以及条件渲染与列表渲染等等,但是vue还有一个很大的特点就是组件系统,网站最基本就是html/css/js,但是其实我们就可以把应用抽象成组件树,它们都是由一些可复用的组件构成,这样构建速度会非常快,而且维护方便,极大地提升效率

    在这里插入图片描述
    在这里插入图片描述
    但是小程序目前还不支持,只是它内置了一些基础组件,不过之后会不会出现,无从得知小程序目前比较明显的缺点,就是组件化支持不够,npm包下载不方便(需要自己拷贝进去,不支持node_modules),css一些属性支持不足不过这些可以用我们自己搭的脚手架,通过gulp/webpack编译,让它们支持一些我们想要的特性,腾讯Budly就开发了一个wepy框架,它学习了vue的风格,使用单文件,通过拆解编译形成小程序的wxml/wxss,具体我还没用过,star量也1000+了,觉得思路很好赞一下

    在这里插入图片描述
    小程序DEMO:
    `project
    ├── pages
    | ├── index
    | | ├── index.json index 页面配置
    | | ├── index.js index 页面逻辑
    | | ├── index.wxml index 页面结构
    | | └── index.wxss index 页面样式表
    | └── log
    | ├── log.json log 页面配置
    | ├── log.wxml log 页面逻辑
    | ├── log.js log 页面结构
    | └── log.wxss log 页面样式表
    ├── app.js 小程序逻辑
    ├── app.json 小程序公共设置
    └── app.wxss 小程序公共样式表

    使用wepy框架后目录结构:(perfect!)

    project
    └── src
        ├── pages
        |   ├── index.wpy    index 页面配置、结构、样式、逻辑
        |   └── log.wpy      log 页面配置、结构、样式、逻辑
        └──app.wpy           小程序配置项(全局样式配置、声明钩子等)
    
    
    

    回到微信小程序,开发时还遇到一些小坑,比如实现回到顶部,这个在浏览器轻松实现,但是小程序没有提供bom/dom,唯一跟scroll搭上钩的就只有一个组件scroll-view,但是我还需要顶部下拉加载(居然跟它的scrolltoupper事件冲突了?),只能用一些小技巧来规避这些问题,在切换时我想回到顶部,瞬间将列表项data设为空,再填入数据,这样就回到顶部了,虽然也实现了效果,但是未必有些hack

    再谈谈小程序的rpx单位吧

    rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

    |设备| |rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度)
    | iPhone5 |1rpx = 0.42px |1px = 2.34rpx
    |iPhone6 | 1rpx = 0.5px | 1px = 2rpx
    |iPhone6 | Plus 1rpx = 0.552px | 1px = 1.81rpx

    这个还挺不错的,让适配比较容易,不然在前端开发中还得使用rem、百分比等等一些技巧不过需要注意它官网提醒了在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。我也体验到了这个毛刺当你使用padding-bottom: 0rpx的时候你会发现其实是有缝隙的,但是0px是不会有的
    总之,小程序整体来看还是不错的,而且开发团队也一直在努力,经常半夜两三点更新发布小程序的能力😂,也一直在往主流前端框架靠,支持了数据绑定、模块化、ES6等等,上手也很容易,不过要用它来做出一个让用户认可的精致的产品还是需要费很大的心思的

    最后

    谢谢阅读~

    展开全文
  • 如何学习微信小程序? 学习微信小程序所需基础

    万次阅读 多人点赞 2020-03-30 16:23:19
    微信小程序作为近几年“微服务”的杰出代表,应用十分广泛。小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取传播,同时具有出色的使用体验。 说的通俗一些,微信小...

    说明:笔者重新规划了博客方向,想更详细的讲解微信小程序的所有技术内容,本文于2020年5月24日已做修改。

    同时笔者也欢迎一起合作共赢,愿意写杂志,写书,贡献自己的一份微薄之力!


    本文原创首发CSDN,链接 https://blog.csdn.net/qq_41464123/article/details/105198163 ,作者博客https://blog.csdn.net/qq_41464123 ,转载请带上本段内容,尤其是脚本之家、码神岛等平台,谢谢配合。


    作为第二篇的讲解,本文主要讲解 

    1. 微信小程序好在哪里?
    2. 学习微信小程序,需要什么基础?
    3. 如何学习微信小程序?
    4. 微信小程序的基本架构。

     

    前言

    微信小程序作为近几年“微服务”的杰出代表,应用十分广泛。小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

    说的通俗一些,微信小程序就是微信中非常小巧的程序(这不废话......),我们打开自己手机中的微信,向下一拉,就可以看到小程序列表了。比如“腾讯QQ”这个小程序,我们可以利用它,接收QQ的消息;再入“跳一跳”,“天天象棋”这些小游戏,我们可以利用学习工作之余的短暂空闲时间玩上一把小游戏......那么,为什么微信小程序能够有如此大的发展呢?现在就来谈谈我的看法。

    笔者曾经在运维微信公众号的时候,发现了小程序的存在,后来就申请了一个,尝试着开发出了第一个属于自己的小程序。从无到有,再到现在的实战开发,虽然敲的代码都是套模板,思路也很暴力,但平时还是会积累很多小程序相关的实践经验和做一些基于微信小程序的开源项目,所以说总结微信小程序的项目经验,我觉得是我最好的成长,也希望给今年想接触微信小程序或者想从事微信小程序工作的朋友带来一些经验和思考


     

    一:小程序优势有哪些?

     

    1.几乎不占用手机内存

    如果你的电脑是低配的话,那么你就必须要合理取舍安装的软件。笔者曾经拿学校机房的电脑做过简单实验,我给电脑安装若干杀毒软件,然后同时开始体检、木马扫描操作。实验结论:只需两个杀毒软件同时体检、杀毒操作就会导致死机,2分钟内鼠标键盘无响应且电脑无法正常工作;四个杀毒软件同时体检,电脑大概率蓝屏

    电脑为什么会死机,会蓝屏?就是因为电脑资源耗尽。同理,你如果给自己的手机装上几十个APP,效果可想而知。微信小程序几乎不占用系统内存,能给用户,尤其是低配手机用户一个良好的体验

     

    2.无需安装,用完即走

    最近因为新型冠状病毒,全国大多数学生都在参与网上教学,这个时候会涉及到很多APP。当然常用的APP,安装在手机,完全没问题,但是那些不常用的、不太需要的如何是好?比如在大学,充饭卡一个APP,冲热水卡一个APP,跑步一个APP,看新闻做题也是一个APP,要请个假也是一个APP,可能还是学校强制要求安装的,大家是否吐槽过这种行为?

    而微信小程序是建立在微信这个大平台的应用,使用时被打开,使用完毕就消失,而且随时都可被使用,做到了“用时打开,用完即走。当然小程序还有其他优点,这里不再一一叙述。

     

    继续阅读,你将会了解到这些

    • 微信小程序需要的基础

    • 微信小程序优势以及设计思想

    • 如何学习微信小程序

    • 微信小程序开发流程


     

    二:学习微信小程序,需要什么基础?

    阅读本文之前,建议大家最好要有以下基础知识,会写小程序的代码不一定能很好的实现业务需求和功能,要想实现不同项目需求下不同复杂度的逻辑,一定要对以下基础有充足的了解。所以在此希望大家先熟悉一下相关基础知识,好好研究一下。

    • HTML:至少常用的标签要学会使用,比如<button>按钮标签,<text>文本标签,要知道一些标签是干什么用的。
    • CSS:了解类选择器、标签选择器定义和用法;了解常用的属性,比如height高度,width宽度,font-size字体大小等。
    • 熟练一种编程语言:java/js/c++皆可,这里主要是要熟练变量定义、if条件判断、字符数组。
    • 其他:相对/绝对路径,了解JSON格式,生命周期函数

     

    三:如何学习小程序?

     

    我个人认为,学习最快的方式就是实践,根据官方文档,多写几个demo是就是学习微信小程序最好的方式。

    • 学习前端基础,包括但不限于HTML + CSS + JS + JQ。
    • 学习小程序基础语法,了解小程序基本结构(JS、JSON、WXML、WXSS)。
    • 实战,写项目。

    初学者需要注意几点:

    • 小程序不像vue那样,修改代码按下保存后,网页上会立刻见效。每一次修改代码后,如需看效果,必须重新编译或者按Ctrl + S 保存,然后等待模拟器重新加载主页,才可查看修改后的效果。
    • 要善于调用模板或者接口,切忌大片自行编程。如果需要实现某个功能,先查询一下官网文档,是否有相应的模板或库。
    • 如果是需要对接数据库的项目,必须在开发前购买服务器,实名认证且备案,小程序开发时间一般少于服务器审核时间(对于小项目来讲),小程序请求的地址必须是已备案的域名。
    • 不要使用传统编程思想来看待小程序开发,小程序不像Java那样可以随心应手的写,其部分功能未必能够实现。

     

    四:小程序项目的基本文件类型

     

    首先是开发工具!

    磨刀不误砍材工,要想高效率的开发,必须要熟练使用开发工具(IDE)。下面我们先来了解一下微信小程序的专属开发工具。

    官网下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    第一块区域是模拟器区域,是我们代码效果的直接显示,按下CTRL + S 或者编译键,模拟器区域会刷新显示我们的界面。

    第二块区域是项目结构一个小程序主体部分由三个文件组成,必须放在项目的根目录,分别是:JS(小程序逻辑)、JSON(小程序公共配置)、WXSS(小程序公共样式表)每个分页面分为JS(页面逻辑)、JSON(页面配置)、WXML(页面结构)、WXSS(页面样式表)四个模块,且描述页面的四个文件必须具有相同的路径与文件名。

    第三块区域就是我们编写代码的区域,占用了大部分的屏幕。

    第四块区域是调试区域,小程序可以通过console.log()向控制台输出临时的信息,就相当于C++的cout<<"hello zwz"<<endl; 也相当于Java的syso。这时候这些临时信息会在这个区域显示,方便我们调试程序。

    第五块区域就是常用的功能模块,这里点击编辑,代码区会自动保存,模拟器会重新加载界面;点击上传代码,会发送到微信公众平台上,然后用于发布小程序。


    其中第二块区域的项目结构,我们重点介绍

    第一块:JSON

    上面提到:每个分页面分为JS(页面逻辑)、JSON(页面配置)、WXML(页面结构)、WXSS(页面样式表)四个模块那么这些页面分别都有什么用途呢?

    JSON是页面配置文件,可以对本页面的窗口表现进行配置,文件内容为一个 JSON 对象,会涉及到很多的属性。

    比如navigationBarTitleText 就是显示在小程序最上方的标题名称。

    页面中配置项在当前页面会覆盖总的app.json的中相同的配置项。

    {
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "标题zwz",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light"
    }

    第二块:WXML

     

    WXML其实就是HTML,是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。

    比如最常用的双向数据绑定

    index.wxml

    <view class="container">
      {{msg}}
    </view>

    index.js

    Page({
      data: {
        msg:'hello zwz',
      },
      onLoad: function () {
       
      }
    })

    这样,我们虽然在WXML界面没有直接写文字,但{{msg}}就直接读取到了JS文件的变量值。

    这时,我们按下CTRL + S(保存,重新编译),我们会发现前台会渲染出  hello zwz。

    这就是传说中的双向数据绑定,你把JS后台的 hello zwz  改成 hi zwz,那么前台也会显示 hi zwz,以此类推。

     

    同理,如果是数组

    在JS页面的Page的data下,加上array变量,作为普通数组

    array:[1,2,3,4,5,6,7,8,9],

    接着将WXML界面的msg替换成array,界面则会显示如下:


    本文原创首发CSDN,链接 https://blog.csdn.net/qq_41464123/article/details/105198163 ,作者博客https://blog.csdn.net/qq_41464123 ,转载请带上本段内容,尤其是脚本之家、码神岛等平台,谢谢配合。 


    第三块:WXSS

    WXSS和CSS一样,是一套样式语言,用于描述 WXML 的组件样式,WXSS 用来决定 WXML 的组件应该怎么显示。WXSS在实际开发过程中,拥有绝大部分CSS的内容。

    那么相比CSS而言,WXSS中独有的rpx单位可能会用得到,这个尺度单位可以根据屏幕宽度进行自适应。

    具体格式如下所示,下面是用了类选择器对WXML中的元素进行样式美化。

    .title{
      font-size: 30px;
      color: royalblue;
    }
    .input-placeholder{
      font-size: 16px;
    }
    .section{
      width: 100%;
      height: 55px;
      box-sizing: border-box;
      padding-top: 15px;
      font-size: 16px;
      display: flex;
    }

    第四块:JS

    这一块毫无疑问,就是用来存放后端逻辑代码的,我们需要掌握几个常用的生命周期函数,onShow、onLoad。

    Page({
      data: {
        msg: "hello zwz"
      },
      onLoad: function(options) {
        // 页面创建时执行
      },
      onShow: function() {
        // 页面出现在前台时执行
      },
      onReady: function() {
        // 页面首次渲染完毕时执行
      },
      onHide: function() {
        // 页面从前台变为后台时执行
      },
      onUnload: function() {
        // 页面销毁时执行
      },
    })

    然后就是自定义方法,注意是和onLoad()平级

    比如,我们在WXML内定义一个按钮

    <button bindtap="run">按钮1</button>
    

    接着,在JS页面编写响应事件

    Page({
      data: {
        msg: "hello zwz"
      },
      onLoad: function(options) {
        // 页面创建时执行
      },
      run: function() {
        // do some things
      },
    })

    那么,我们在点击这个按钮之后,就会触发run()这个方法。

     

    五:总结

    总而言之,本文讲解了微信小程序项目的基本架构,以及如何学习微信小程序,以及学习微信小程序所需要的基础,还有前台渲染的基本代码。

    笔者会出一个微信小程序的专栏,详细讲解微信小程序的常用技术,谢谢朋友们的关注!

    展开全文
  • 微信小程序控制硬件第2篇 】 开始微信小程序之旅,导入小程序Mqtt客户端源码,实现简单的验证通讯于服务器! 【微信小程序控制硬件第3篇 】 从软件到硬件搭建一个微信小程序控制esp8266的项目,自定义通讯协议,...

    微信小程序控制硬件第1篇 】 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件!
    微信小程序控制硬件第2篇 】 开始微信小程序之旅,导入小程序Mqtt客户端源码,实现简单的验证和通讯于服务器!
    微信小程序控制硬件第3篇 】 从软件到硬件搭建一个微信小程序控制esp8266的项目,自定义通讯协议,为面试职位和比赛项目加分!
    微信小程序控制硬件第4篇 】 深度剖析微信公众号配网 Airkiss 原理与过程,esp8266如何自定义回调参数给微信,实现绑定设备第一步!
    微信小程序控制硬件第5篇 】理清接下来必须走的架构思想,学习下 JavaScript 的观察者模式,在微信小程序多页面同时接收到设备推送事件!
    微信小程序控制硬件第6篇 】服务器如何集成七牛云存储SDK,把用户自定义设备图片存储在第三方服务器!
    微信小程序控制硬件第7篇 】动起来做一个微信小程序Mqtt协议控制智能硬件的框架,为自己心里全栈工程师梦想浇水!!
    微信小程序控制硬件第8篇 】微信小程序以 websocket 连接阿里云IOT物联网平台mqtt服务器,封装起来使用就是这么简单!
    微信小程序控制硬件第9篇 】巧借阿里云物联网平台的免费连接,从微信小程序颜色采集控制 esp8266 输出七彩灯效果,中秋节来个直播如何?!
    微信公众号控制硬件 第10篇 】如何在微信公众号网页实现连接mqtt服务器教程!!
    微信小程序控制硬件 第11篇 】全网首发,微信小程序ble蓝牙控制esp32,实现无需网络也可以控制亮度开关。
    微信小程序控制硬件 第12篇 】微信小程序蓝牙控制硬件应如何开发?为您全面解析微信小程序蓝牙API的使用。
    微信小程序控制硬件 第13篇 】安信可B站直播学习总结,微信小程序MQTT远程控制ESP8266 NodeMCU,谈谈微信生态那些事。

    在这里插入图片描述


    前言

        上周日晚上七点到九点,我在B站直播了一场 《微信小程序MQTT远程控制ESP8266 NodeMCU》,过程中我已尽力讲解目前微信硬件云的各条术语,以及应用技术;然而在下发控制数据到 ESP8266 时候,竟然翻车了,后面自己私下仔细找bug,发现这个bug是之前遇过的,只是当时头脑不够清晰去回忆和查找;

        总的来说,上半场我是挺满意的,算是把一些术语理论带给了大家,毕竟微信硬件云也是很久没维护了,现在出来了《腾讯连连》的微信小程序,支持配网和控制ESP8266,但是,微信硬件云集成了微信公众号的全部优势,已经是成熟的方案了,这个面向个人和公司,都有很大的商业价值哦!

        然而,我发现过程中,还是有带目的性来的喷子来带节奏喷安信可如何如何不好,这种事情发现在我直播间,我是淡定的;因为,不管哪行哪业,都有这样的人存在,包括最近的 “明星捐款道德绑架” ,看得直播越多,你就越发现:

        内心强大的人,是可以无视这种喷子,只管做好自己即可!

        下面给大家看看直播回放:

    【直播回放】微信小程序MQTT远程控制安信可NodeMCU ESP8266。(上)


    一、准备材料

    材料
    NodeMCU ESP8266模块
    微信小程序账号
    百度天工服务器

    二、微信硬件云初认识

        这里我们务必熟悉微信端控制设备的各种接入方案和技术,就要从微信硬件云熟悉:

    1. 微信公众号配网: airkiss技术,功能为 通过 微信公众号 带WiFI功能的设备模组快速连接到指定的路由器; ESP8266、ESP32和RTL8710等模组支持;
    2. 微信公众号通讯: airsync技术,功能为 通过 微信公众号与带 蓝牙功能的设备模组互相通讯,比如我们常见的微信公众号打印相片;
    3. 微信公众号近场发现:也称为 AirKiss局域网发现功能,顾名思义,就是局域网内可以发现已连接路由器的设备。注意:这种只能单向通讯, 设备 ----> 公众号!
    4. 微信公众号 JS- SDK :微信公众号开发也是网页开发的一种,所以微信有专门的 微信公众号 JS- SDK 开发资源包提供,能够在网页H5端调起配网接口使您的设备连接路由器;
    5. 设备直连微信硬件云SDK:顾名思义,即为设备直连微信硬件云平台,打通硬件云的生态链接;
    6. 设备商云连接微信硬件云:厂商云连接微信硬件云方案是指设备厂商使用自己的云或第三方云和微信硬件云对接的方案。比如 蜂巢扫码取快递!

        设备商云连接微信硬件云和设备直连微信硬件云的流程图:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-frJM6CVh-1584428309467)(/api/project/918313/files/18720902/imagePreview)]

    总结

    1. 设备商云连接微信硬件云务必 有自己的服务器业务逻辑对接微信硬件云! 大多数业务逻辑是在私有服务器完成!
    2. 设备直连微信硬件云,那么公司的嵌入式开发工程师务必熟透 设备端SDK API的使用,因为这是根据微信硬件云的入门文档而开发!

    以上2个方案接入,都要熟悉其 SDK文档开发流程,有没有一种标准的协议自己开发,不用直连微信硬件云就可以控制呢?
    答案:有!

    三、本项目实现原理

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l3nnSmGQ-1584428309467)(/api/project/918313/files/18720718/imagePreview)]

        注意角色:(设备 --> esp8266,设备商云 --> 服务器,微信客户端 --> 微信小程序):

        先上图,也请认真观看上图,这是我本篇实现的控制过程,也是我想到的控制过程!
    概述:

    • ①:服务器我们不用微信硬件云,而是我们自己的服务器,上位机就是微信客户端,我们是在微信的环境下开发的,也就避免不了和微信打交道,避免不了要遵循微信开发的规范!所以要有一定的前端开发知识哦!也就是H5+css+javaSrcipt,微信的小程序开发和这个非常相似!如果想入门微信小程序开发,自己可以去琢磨!
    • ②:设备商云也就是我们的服务器,仅仅做一个中转信号处理,不做任何的消息存储和分析哈!
    • ③:通讯过程是 esp8266上报消息到服务器,服务器转发消息到微信小程序!反过来,微信小程序控制下发,先发送消息到服务器,然后到esp8266!
    • ④:既然服务器仅仅是一个中转信号处理,那么我们的微信小程序和esp8266的通讯协议,自己拟定就好,下面是我拟定的,也是本文项目的协议!

    四、本项目通讯协议


    • 微信小程序下发控制的通讯协议
    主题发送端接收端消息(JSON格式)消息含义
    /light/deviceOut微信小程序esp8266“{“change”:“power”,“value”:true}”开灯
    “{“change”:“power”,“value”:“false”}”关灯
    “{“change”:“pwm”,“value”:50}”调节亮度:value为亮度值 ,范围 [0,100]
    “{“change”:“query”,“value”:0}”微信小程序主动请求最新状态
    • esp8266上报同步的通讯协议
    主题发送端接收端消息(JSON格式)消息含义
    /light/deviceInesp8266微信小程序“{“power”:“false”,“brightNess”:50}”power为灯的状态,brightNess是亮度值,范围 [0,100]

    五、百度天工服务器 注册

         注册了之后,要拿到 MQTT 连接的参数,包括:

    • ESP8266 TCP MQTT 连接百度天工云的参数:包括 域名、端口号、UserName、Password、clientId;
    • 微信小程序端 WebSocket MQTT 连接百度天工云的参数:包括 域名、端口号、UserName、Password、clientId;

         具体的流程请看视频回放;

    六、ESP8266接入百度天工云;

    6.1 初始化LED驱动代码

    这里我手上的安信可正版NodeMCU 上的蓝色是GPIO2连接,并且低电平有效,非高电平有效哦!!其他的不知道哦!

    //PWM 周期 100us(也就是10Khz)
    #define PWM_PERIOD (100)
    //pwm gpio口配置
    #define CHANNLE_PWM_TOTAL 1 //一共1个通道
    #define CHANNLE_PWM 0
    #define PWM_OUT_IO_NUM 2 //灯管脚 也就是我们NodeMCU的蓝灯
    // pwm pin number
    const uint32_t pinNum[CHANNLE_PWM_TOTAL] = {PWM_OUT_IO_NUM};
    // don't alter it !!! dutys table, (duty/PERIOD)*depth , init
    uint32_t setDuties[CHANNLE_PWM_TOTAL] = {50};
    //相位设置,不懂的或者不需要的全部为0即可
    int16_t phase[CHANNLE_PWM_TOTAL] = {
        0,
    };
    
    void TaskGpio(void *p)
    {
        pwm_init(PWM_PERIOD, setDuties, CHANNLE_PWM_TOTAL, pinNum);
        //设置相位:具体有什么用? 访问了解 https://blog.csdn.net/xh870189248/article/details/88526251#PWM_143
        pwm_set_phases(phase);
        //我司安信可出品的 NodeMCU的蓝灯是低电平有效,设置反相低电平有效
        pwm_set_channel_invert(1ULL<< 0);
        //设置50%亮度
        pwm_set_start(50);
        vTaskDelete(NULL);
    }
    

    6.2 初始化MQTT连接

    static void mqtt_app_start(void)
    {
        esp_mqtt_client_config_t mqtt_cfg = {
            .event_handle = mqtt_event_handler,
            .host = "xxxxxx.mqtt.iot.gz.baidubce.com",
            .username = "xxxxxx/device",
            .password = "LXSFzu50zI5ezBrl",
            .port = 1883,
            .keepalive = 200,
        };
        esp_mqtt_client_handle_t client = esp_mqtt_client_init(&mqtt_cfg);
        esp_mqtt_client_start(client);
    }
    

    6.3 接受到服务器下发数据的解析处理动作:

    务必看准协议,再敲代码!

            ESP_LOGI(TAG, "MQTT_EVENT_DATA");
            {
                首先整体判断是否为一个json格式的数据
                cJSON *pJsonRoot = cJSON_Parse(event->data);
                //如果是否json格式数据
                if (pJsonRoot == NULL)
                {
                    break;
                }
                cJSON *pChange = cJSON_GetObjectItem(pJsonRoot, "change");
                cJSON *pValue = cJSON_GetObjectItem(pJsonRoot, "value");
    
                //判断字段是否pChange格式
                if (pChange && pValue)
                {
                    //用来打印服务器的topic主题
                    ESP_LOGI(TAG, "xQueueReceive topic: %.*s ", event->topic_len, event->topic);
                    //打印用于接收服务器的json数据
                    ESP_LOGI(TAG, "xQueueReceive payload: %.*s",event->data_len, event->data);
                    ESP_LOGI(TAG, "esp_get_free_heap_size : %d \n", esp_get_free_heap_size());
    
                    //判断字段是否string类型
                    if (cJSON_IsString(pChange))
                        printf("get pChange:%s \n", pChange->valuestring);
                    else
                        break;
    
                    //获取最新的状态,对应的获取温湿度按钮
                    if (strcmp(pChange->valuestring, "query") == 0)
                    {
                    }
                    //收到服务器的开关灯指令
                    else if (strcmp(pChange->valuestring, "power") == 0)
                    {
                        //开灯
                        if (strcmp(pValue->valuestring, "true") == 0)
                        {
                            pwm_set_start(100);
                        }
                        //关灯
                        else
                        {
                            pwm_set_start(0);
                        }
                    }
                    //收到服务器的调节亮度灯指令
                    else if (strcmp(pChange->valuestring, "pwm") == 0)
                    {
                        pwm_set_start(pValue->valueint);
                        // 主动发送数组到串口
                    }
                    //每次下发成功控制都要主动上报给服务器
                    post_data_to_clouds();
                }
                else
                    printf("get pChange failed \n");
                 //删除cjson,释放内存
                cJSON_Delete(pJsonRoot);
    

    6.4 设备上报

    /**
     * @description: 上报数据给服务器
     * @param {type} 
     * @return: 
     */
    static void post_data_to_clouds()
    {
    
        cJSON *pRoot = cJSON_CreateObject();
        uint32_t duty_p = 0;
        //获取当前的pwm输出百分比
        if (pwm_get_duty(CHANNLE_PWM, &duty_p) != ESP_OK)
        {
            printf("Error in getting period...\n\n");
        }
        //是否为0,否则就是开灯状态!
        if (duty_p != 0)
            cJSON_AddBoolToObject(pRoot, "power", true);
        else
            cJSON_AddBoolToObject(pRoot, "power", false);
        //上报pwm百分比,作为亮度参数给服务器
        cJSON_AddNumberToObject(pRoot, "brightNess", duty_p);
        //格式化为字符串
        char *s = cJSON_Print(pRoot);
        //发布消息
        esp_mqtt_client_publish(client, MQTT_DATA_PUBLISH, s, strlen(s), 1, 0);
        //删除json结构体,释放内存
        cJSON_free((void *)s);
        cJSON_Delete(pRoot);
    }
    

    这时候,我们可以在后台模拟小程序连接服务器,从而控制 ESP8266 ;

    在这里插入图片描述

    七、微信小程序 websocket MQTT接入百度天工

    上面的设备 ESP8266 是通过TCP MQTT接入天工,而 微信小程序是属于网页前端,因此走 websocket MQTT协议;
    这里已有一个开源库,集成了 实现微信小程序连接mqtt服务器,可控制esp8266智能硬件等需求。

    https://github.com/xuhongv/WeChatMiniEsp8266

    下载之后,导进 微信小程序开发工具,打开文件 WeChatMiniEsp8266/pages/simpleDemo修改连接参数:服务器域名,用户名、密码等参数;

    如需,美化UI等操作,请自行修改UI设计或集成代码到您项目去哦!

    另外,不要把我的博客作为学习标准,我的只是笔记,难有疏忽之处,如果有,请指出来,也欢迎留言哈!

    • 玩转esp8266带你飞、加群QQ群,不喜的朋友勿喷勿加:434878850
    • 个人邮箱:xuhongv@yeah.net 24小时在线,有发必回复!
    • esp8266源代码学习汇总(持续更新,欢迎star):https://github.com/xuhongv/StudyInEsp8266
    • esp32源代码学习汇总(持续更新,欢迎star):https://github.com/xuhongv/StudyInEsp32
    • 关注下面微信公众号二维码,干货多多,第一时间推送!

    在这里插入图片描述

    展开全文
  • 谈谈微信小程序中首次对接融云WebIM SDK经验

    千次阅读 热门讨论 2019-04-16 15:06:54
    多读多写多记录,多学多练多思考。----------- Banana.Banuit Gang(香柚帮) 最近在做一个项目,其中需要实现一个咨询的即时通信功能,于是就使用了融云WebIM SDK来实现这个功能,融云那边...我的项目小程序下方的T...
  • 微信小程序面试题

    2019-07-18 15:12:18
    1 请谈谈微信小程序主要目录和文件作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验; App.js 设置一些全局的基础数据等; App.json 底部tab, 标题栏路由等设置; App.wxss 公共...
  • 在解决这些问题后,也有了一些收获,今天就来大家分享在这个小程序中,最难的音乐播放这一部分的种种问题解决。 首先,先感谢本项目的api提供者binaryify 选择这个项目,也是因为后端api有大佬提供了,需要数据...
  • 微信小程序 面试题

    2019-10-28 14:27:09
    1 请谈谈微信小程序主要目录和文件作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验; App.js 设置一些全局的基础数据等; App.json 底部tab, 标题栏路由等设置; App.wxss ...
  • 微信小程序之基本文件笔记基本文件app.json.wxml.wxss.js 基本文件 对小程序的基本文件做一个简要的笔记记录 app.json 在创建一个空白的小程序后,我们点击调试运行,会出现如下报错 这就说明了app.json是整个小...
  • 微信小程序最新面试题

    千次阅读 多人点赞 2020-03-25 18:09:33
    1 请谈谈微信小程序主要目录和文件作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验; App.js 设置一些全局的基础数据等; App.json 底部tab, 标题栏路由等设置; App.wxss ...
  • 微信小程序入门三request请求

    万次阅读 2017-03-08 21:38:00
    上一章讲了微信小程序的UI框架 weui-wxss 这章就谈谈微信小程序的数据交互,wx.request 方法。 request的请求发起的是https的请求,如果你的服务器是http站点,那需要做配置。可以参考文章:http转https教程 如果你...
  • 微信小程序

    2021-10-13 10:43:25
    1. 请谈谈微信小程序作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验; App.js 设置一些全局的基础数据等; App.json 底部tab, 标题栏路由等设置; App.wxss 公共样式,引入...
  • 1 请谈谈微信小程序主要目录和文件作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验; App.js 设置一些全局的基础数据等; App.json 底部tab, 标题栏路由等设置; App.wxss ...
  • 1 请谈谈微信小程序主要目录和文件作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验; App.js 设置一些全局的基础数据等; App.json 底部tab, 标题栏路由等设置; App.wxss...
  • 前言 首先要声明的是,我是一名Android开发者,之前基本没有前端开发经验,甚至连 ...前面就不说太多东西了,文章的末尾再谈谈我对小程序的一些看法——这篇文章主要谈谈在开发小程序的过程中遇到的一些坑。
  • 微信小程序资源整理

    千次阅读 2017-08-24 10:30:51
    开发文档 开发文档 ...微信小程序设计指南 微信小程序平台运营规范 WeUI 微信官方设计团队为微信Web开发量身设计基础样式库 | 项目地址 | wiki w3cschool | 微信小程序开发教程手册文档 其他文档 腾讯云带
  • 1 请谈谈微信小程序主要目录和文件作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验; App.js 设置一些全局的基础数据等; App.json 底部tab, 标题栏路由等设置; App.wxss ...
  • 微信小程序开发初探

    万次阅读 2016-11-08 17:37:40
    1. 微信小程序web开发工具下载地址 2. 创建项目 3. 开发工具界面 4. 调试区六大工具介绍 5. 我与微信小程序的插曲 6. 微信小程序总结 一、微信小程序web开发工具下载地址 1.1 在微信公众平台-小程序...
  • 微信小程序学完了,给大家分享一些自己学小程序的心得,希望能帮到大家。 首先,我谈谈小程序数据绑定的那一块,所有从本地或者远程服务器的API传过来,都必须绑定到data: {}, 绑定格式是一个一个的键值对(value:...
  • 一、微信小程序结构 1. 小程序的结构 1.1 小程序项目的结构 1.2 小程序页面的结构 ①. 小程序页面Vue组件的对比 每个.vue组件,是由 template 模板结构、script 行为逻辑、 style 样式3个部分组成的 每个...
  • 在看这篇文章前,先大家,大致了解微信小程序文档。   第一步,先搭好骨架,创建一个list文件夹,用来存放文章列表相关的内容,官方文档中也强调过:“为了方便开发者减少配置项,我们规定描述页面的这四个文件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,833
精华内容 1,533
关键字:

请谈谈微信小程序主要目录和文件的作用

微信小程序 订阅