从这篇文章你可以学到： 1、微信小程序核心：页面的创建、编译、配置 2、如何使用data渲染数据，app使用全局变量、函数 3、页面的基本函数调用顺序，onLoad、onShow等 4、小程序预览、真机调试等 视频下载链接： https://pan.baidu.com/s/10sxcb6CZH5PujrQKFNKrmg 提取码：ekgg 视频内容精要 一、微信小程序核心：页面的创建、编译、配置 微信小程序开发者基本的工作就是开发页面。 在创建页面的时候，先创建目录，再创建page，目录名称和page的名称最好是一致的，这样方便管理和阅读。 页面创建完成之后，会在app.json中的pages数组中添加这个页面的路径。普通编译，编译的是pages数组中的第一个页面，所以你可以调换位置实现默认编译。当然，也可以通过添加“编译模式”，来实现多个页面随时编译随时切换。 二、如何使用data渲染数据，app使用全局变量、函数 在上篇文章中讲解了data数据的渲染和使用：this.setData来实现。 app=getApp() ，获取的全局应用（app），不同页面共享一些值或者函数的时候，非常有用。 当然如果你现在还不是很了解这些函数或者使用，先不求甚解吧。知道或者记住就是这么做才可以实现页面的数据修改和展示，学完中级篇后续的内容，再回来看你就会明白了。 三、页面的基本函数调用顺序，onLoad、onShow等 页面默认创建的函数如下，可以通过文档先对它们有个简单的了解。 onLoad 生命周期函数–监听页面的加载 onShow 生命周期函数–监听页面显示 onReady 生命周期函数–监听页面初次渲染完成 onHide 生命周期函数–监听页面隐藏 onUnload 生命周期函数–监听页面卸载 … 四、页面的预览、真机调试等 简单介绍了如何通过手机预览小程序，你也可以尝试一下如何通过手机打开“调试模式”，看一下console.log的输出； 当然，通过真机调试看log是非常直观的，我们再开发过程中如果遇到bug，使用这个模式是非常高效的 关于页面的基本用法可以参考官方文档： https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html 我们后续课程也会详细学习这里的每一个知识点

小程序支持的单位？ 可以说小程序就是在微信体系网页的另一种表现方式。网页中的单位小程序基本都支持。但实际开发中，我常用到的是以下几种 ↓ rpx rpx做为小程序自家系统里的单位，特性是可以根据屏幕宽度进行自适应。rpx官方介绍 比如我写一个2:1比例的全屏轮播图，可以这样写： [代码]swiper { width:750rpx; height:375rpx; } [代码] 1rpx = 0.5px = 1物理像素。网页开发中，默认字体一般设置为14px，在小程序中我们就可以设置小程序的默认字体大小为28rpx。 px 在小程序开发中 rpx基本就代替了px，但在一些特殊的场合，px的表现要比rpx好。 兼容ipad时，由于ipad可以横屏和竖屏，并且屏幕宽度可以达到2K以上，如果你的小程序要考虑到兼容ipad，那么还是多考虑使用px吧。 覆盖微信原生组件样式。em？？？？可以覆盖微信原生样式？？？ 是的，只有小程序老玩家才知道的秘密！小程序原生样式是可以覆盖美化的，以 <switch> 组件为例：switch代码片段 [图片] 导入代码片段到开发者工具中，并切换设备模式预览可以发现rpx表现不佳。使用px反而更好。 em与rem em与rem在H5的网页开发上可以大放异彩，但小程序中因为有rpx的存在，em与rem使用的就少了。基本只有在一些对字体宽度有特效的情况下才会使用。比如首行缩进。 vw、vh和百分比 vw：视窗宽度，1vw等于视窗宽度的1%。 vh：视窗高度，1vh等于视窗高度的1%。 %：父级容器的宽度百分百。 [图片] calc() 的使用 前面讲了单位，那么我们现在来聊聊怎么使用这些单位了。小程序是网页的一种，支持css，也支持calc()。 这里吃下书： calc() 函数用于动态计算长度值。 [代码] ● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； ● 任何长度值都可以使用calc()函数进行计算； ● calc()函数支持 "+", "-", "*", "/" 运算； ● calc()函数使用标准的数学运算优先级规则； [代码] 使用场景示例 垂直导航页，常用于外卖订餐或者商城的二级分类页。 上半部分是定死高度375rpx的轮播图区域，下半部分是可以随设备高度变化的可滚动的区域。容器高度可以这样写： [代码]{ height:calc(100vh - 375rpx) } [代码] [图片] 结尾 夜深了，晚安，不定期更新小程序使用技巧。新人写文章，大佬多指点！ [图片]

一、写作背景 接触小程序一年多，真实体验就是小程序开发门槛相对而言确实比较低。不过小程序的开发方式，一直是开发者吐槽的，如习惯了 Vue，React 开发的开发者经常会吐槽小程序一个 Page 必须由多个文件组成，组件化支持不完善或者说不能非常愉快的开发组件。在以前小项目中没太大感觉，从加入有赞，参与有赞微商城小程序的开发，是真切的体会到对于大型小程序项目开发的复杂性。 有赞从微信小程序内测就开始开发小程序，在不支持自定义组件的时代，只能通过 import 的形式拆分模块或实现组件。在业务复杂的页面，可能会 import 非常多的模块，而相应的 wxss 也需要 import 样式，除了操作繁琐，有时候也难免遗漏。 作为开发者，我们当然希望可以让工作更简单，更愉快，也希望改善我们的开发方式。所以希望能够更了解微信小程序框架，减少不必要的试错，于是有了一次对小程序框架的 debug 之旅。(基础库 1.9.93) 通过三周空余时间的 debug，也算对小程序框架有了一些浅显的认识，达到了最初的目的；对小程序启动，实例，运行等有了真切的体会。这篇文章记录了小程序框架的基本代码结构，启动流程，以及程序实例化过程。 本文的目的是希望把我看到的分享给对小程序感兴趣或者正在开发小程序的读者，主要解答“框架对传入的对象等到底做了什么”。 二、从启动流程一窥小程序框架细节 在开发者工具中使用 help() 方法，可以查看一些指令和方法。使用其中的 openVendor 方法可以打开微信开发者工具在小程序框架所在目录。其中以包括以基础库命名的目录和其他帮助文件，如其中有两个工具 wcc，wcsc。wcc 可把 wxml 转换为对应的 JS 函数 —— $gwx(path, global)，wcsc 可将 wxss 转换为 css。而基础库目录包括 WAService.js 和 WAWebview.js 文件。小程序框架在开发者工具中以 WAService.js 命名（WAWebview.js 不知其作用，听说在真机环境使用该文件）。 在开发中工具命令行使用 document.head 可以查看到小程序的启动流程大致如下： [图片] 以小节的方式分别介绍这些流程，小程序是如何处理的（小节编号与图中编号相同）。 1、初始化全局变量 下图是小程序启动是初始化的一些全局的变量： [图片] 那些使用“__”开头，未在文档中提及可使用变量是不建议使用的，wxAppCode 在开发者工具中分为两类值，json 类型和 wxml 类型。以 .json 结尾的，其 key 值为开发者代码中对应的 json 文件的内容，.wxml 结尾的，其 key 值为通过调用 $gwx(’./pages/example/index.wxml’) 将得到一个可执行函数，通过调用这个函数可得到一个标识节点关系的 JSON 树。 [图片] 2、加载框架（WAService.js） 使用工具对 WAService.js 进行格式化后进行 debug。可以发现小程序框架大致由： WeixinJSBridge、 NativeBuffer、 wxConsole、 WeixinWorker、 JavaScript兼容（这部分为猜测）、 Reporter、 wx、 exparser、 virtualDOM、 appServiceEngine 几部分组成。 其中除了 wx 和 WeixinJSBridge 这两个基础 API 集合， exparser, virtualDOM, appServiceEngine 这三部分作为框架的核心， appServiceEngine 提供了框架最基本的接口如 App，Page，Component； exparser 提供了框架底层的能力，如实例化组件，数据变化监听，view 层与逻辑层的交互等；而 virtualDOM 则起着链接 appServiceEngine 和 exparser 的作用，如对开发者传入 Page 方法的对象进行格式化再传入 exparser 的对应方法处理。 框架对外暴露了以下API：Behavior，App，Page，Component，getApp，getCurrentPages，definePlugin，requirePlugin，wx。 3、业务代码的加载 在小程序中，开发者的 JavaScript 代码会被打包为 [代码]define('xxx.js', function(require, module, exports, window, document, frames, self, location, navigator, localStorage, history, Caches, screen, alert, confirm, prompt, fetch, XMLHttpRequest, WebSocket, webkit, WeixinJSCore, Reporter, print, WeixinJSBridge) { 'use strict'; // your code }) [代码] 这里的 define 是在框架中定义的方法，在框架中提供了两个方法：require 和 define 用来定义和使用业务代码。其方式有些像 AMD 规范接口，通过 define 定义一个模块，使用 require 来应用一个模块。但是也有很大区别，首先 define 限制了模块可使用的其他模块，如 window，document；其次 require 在使用模块时只会传入 require 和 module，也就是说参数中的其他模块在定义的模块中都是 undefined，这也是不能在开发者工具中获取一些浏览器环境对象的原因。 在小程序中，JavaScript 代码的加载方式和在浏览器中也有些不同，其加载顺序是首先加载项目中其他 js 文件（非注册程序和注册页面的 js 文件），其次是注册程序的 app.js，然后是自定义组件 js 文件，最后才是注册页面的 js 代码。而且小程序对于在 app.js 以及注册页面的 js 代码都会加载完成后立即使用 require 方法执行模块中的程序。其他的代码则需要在程序中使用 require 方法才会被执行。 下面详细介绍了 app.js，自定义组件，页面 js 代码的处理流程。 4、加载 app.js 与注册程序 在 app.js 加载完成后，小程序会使用 require(‘app.js’) 注册程序，即对 App 方法进行调用，App 方法是对 appServiceEngine.App 方法的引用。 下图是框架对于 App 方法调用时的处理流程： [图片] App 方法根据传入的对象实例化一个 app 实例，其生命周期函数 onLaunch 和 onShow 因为使用不同的方式获取 options的参数。在有些需要根据场景值来实现需求的，或许使用 onShow 中的场景值更合适。 在实际开发过程中发现，在微信顶部唤起小程序和在小程序列表唤起的 options 也是不一样的。在该案例中通过点击分享的小程序进入后，关闭小程序，再通过不同方式进入小程序，通过顶部唤起的还是 options 的 path 属性还是分享出来的 path，但是通过列表中打开直接回到了首页，这里 App 中的 onShow 就会获取到不同的 options。 5、加载自定义组件代码以及注册自定义组件 自定义组件在 app.js 之后被加载，小程序会在这个过程中加载完所有的自定义组件（分包中自定义组件没有有测试过），并且是加载完成后自动注册，只有注册完成后才会加载下一个自定义组件的代码。 下图是框架对于 Component 方法处理流程： [图片] 图中介绍了框架如何对传入 Component 方法的对象的处理，其后面还有很多深入的对于组件实例化的步骤没有在图中表示出来，具体可以在文章最后的附件中查看。 自定义组件在小程序中越来越完善，其拥有的能力也比 Page 更强大，而后面会提到在使用自定义组件的 Page 中，Page 实例也会使用和自定义组件一样的实例化方式，也就是说，他拥有和自定义组件一样的能力。 6、加载页面代码和注册页面 加载页面代码的处理流程和加载自定义组件一样，都是加载完成后先注册页面，然后才会加载下一个页面。 下图是注册一个页面时框架对于 Page 方法的处理流程： [图片] Page 方法会根据是否使用自定义组件做不同的处理。使用自定义组件的 page 对象会被处理为和自定义组件的结构，并在页面实例化时使用不同的处理流程进行实例化。当然对于开发而言没任何不同。 从图中可以发现 Page 传入的（生命周期）代码并不会在这里被执行，可以通过下面小节了解 Page 实例化的详细过程。 7、等待页面 Ready 和 Page 实例化 还记得上面介绍的启动流程中最后一步等待页面 Ready？严格来讲是等待浏览器 Ready，小程序虽然有部分原生的组件，不过本质上还是一个 web 程序。 在小程序中切换页面或打开页面时会触发 onAppRoute 事件，小程序框架通过 wx.onAppRoute 注册页面切换的处理程序，在所有程序就绪后，以 entryPagePath 作为入口使用 appLaunch 的方式进入页面。 下图是处理导航的程序流程： [图片] 从图中可以看出页面的实例化是在进入页面时进行，下图是具体的实例化过程： [图片] 下图是最终可得到 Page 实例： [图片] 可以发现其中多了 onRouteEnd API，实际该接口不会被调用。其中以 component 标记的表示只有在使用了自定义组件时才会有的方法和属性。在前面第 5 小节提到了对于使用自定义组件的页面会按照自定义组件方式解析，这些属性和方法与自定义组件表现一致。 8、关于 setData 小程序框架是一个以数据驱动的框架，当然不能少了对他如何实现数据绑定的探索，下图是 Page 实例的 setData 执行流程： [图片] 其中 component:setData 表示使用自定义组件的 Page 实例的 setData 方法。 三、写在最后 这是一次不完全的小程序框架探索，是在微信开发工具中 debug 的结果。虽然对于实际开发没有什么太大的帮助，但是对框架如何对开发的 js 代码进行处理有了一个很明确的认识，在使用一些 js 特性时可以有明确的感知。如果你还疑惑“小程序框架对传入的对象等到底做了什么”那一定是我表达能力太差，说声对不起。 通过这一次 debug ，也给我引入了新的问题，还希望能够有更多的讨论： · 自定义组件太多启动时会耗时处理自定义组件 · 文件太多会耗时读文件 · 合理的设计分包很重要 当然最后对于框架中已有的能力，还是非常希望微信可以开放更多稳定的接口，并在文档中告知开发者，让开发变得简单一些。

一、获取formId 相信使用过小程序的同学，多少都收到过小程序的通过消息，如下： [图片] [图片] 这类通知消息，是和好友消息一样展示在微信的聊天列表中，所以，点击率还是比较高的。想实现这种小程序的模板消息，就必须要获取用户的formid才可以（如何发消息，请仔细查阅小程序官方文档） 我们来说一下如何获取formId： a、必须通过form组件提交才能获取到formId; b、给form组件设置report-submit="true"属性; c、给form组件添加bindsubmit事件绑定，携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}; d、必须用户手动触发提交表单，不能JS模拟提交，所以，页面上必须要有提交按钮; 看一下示例代码： <form report-submit=‘true’ bindsubmit=‘userSubmit’> <button class=‘button’ bindtap=‘copy’ form-type=‘submit’>复制</button> </form> 以上示例就可以在userSubmit里获取到formId了： userSubmit: function (e) { console.log(e.detail.formId); }, 需要注意一点，开发工具里面是没办法查看到真实的formId的，会是这样一句提示"the formId is a mock one"，提交给服务端就可以拿到了~ 最暴力的方式：整个页面最外层套一个button，点击页面任何地方，都可以获取到formId 二、区分转发的是群聊还是好友 这个其实就是场景值的判断，先看一张图： [图片] 上图可以看出，从好友聊天窗口和群聊窗口点击小程序卡片后，场景值是不一样的，分别是1007和1008，所以，我们可以在app的onLuanch或者onShow方法中去获取到scene值，这样就能知道用户是通过哪种方式进入小程序的~ 之前分享成功，可以获取群ID，这种方式已经被微信官方禁掉了。可以看这篇文章： 三、有哪些开源的小程序框架 wepy wepy是最早推出的一款小程序框架，基于vue进行封装，作者龚澄是腾讯的工程师，早期集累了很多习惯使用vue进行开发的小程序人员。github地址：https://github.com/Tencent/wepy mpvue mpvue也是一个使用 Vue.js 开发小程序的前端框架，美团点评下的一个部门开发的，有胡成全带队开发。github地址：https://github.com/Meituan-Dianping/mpvue taro Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。统于有一款使用React语法开发小程序的框架了，github地址：https://github.com/NervJS/taro 以上三个框架，都有自己的官方交流群，大家可以添加对应的小助手，然后会自动拉你进群。