初探微信小程序
最近由于项目需要，上手了微信小程序，趁着记忆犹在，记录下一些方法与技巧，以下纯粹是本人学习与开发过程中总结的一些经验与方法，记录下来让有兴趣学习小程序的同学少走弯路，如有欠准确望一起交流指正。
持续更新中...
一、从零开始
先在”微信公众平台”注册一个属于你的小程序开发号
https://mp.weixin.qq.com/wxopen/waregister?action=step1
注意事项与各解释可查看官方所给信息：
https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=1524879498
里面从注册到开发准备的信息步骤都很全
完成注册登录小程序管理平台
开发前准备
绑定开发者
登录微信公众平台小程序，进入用户身份- 开发者，新增绑定开发者。（把自己微信号绑定上去）
获取AppID
进入“设置-开发设置”，获取AppID信息。
然后下载微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
根据自己的电脑开发环境选择下载
下载完毕选择 小程序开发模式
之后进入到小程序项目管理界面
要求填写一些信息，项目目录：如已有小程序项目可以直接导入，如果没有可选择一个空目录，填完信息就可以着手写你的第一个小程序啦~
二、文件结构
小程序只有四种文件类型
js ---------- JavaScrip文件
json -------- 项目配置文件，负责窗口颜色等等
wxml ------- 相当于HTML文件
wxss ------- 相当于CSS文件
小程序文件根目录下的 app.xml、app.wxss、app.js、app.json 是小程序的入口文件，小程序的全局配置在这里开发，在新创建小程序项目时自动生成。
app.json
必须，配置文件入口，整个小程序的全局配置。记录页面组成，配置小程序的窗口背景色、导航条样式、默认标题等信息。
注：json 文件不能有注释代码，会报错。
这里有一个能方便创建页面的小技巧，只需在"pages"参数数组下直接加入要创建的新文件路径与名字，文件自动生成（注：只在微信开发者工具下编辑生效，自定义的编辑器中无效）。
app.js
必须，可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
app.wxss
非必须，全局CSS样式文件。
app.wxml
非必须，并非小程序主页面，其主页面的配置在 app.json，json 文件中"pages"参数放在第一的文件路径就是本项目的主页面。
这是最简单的微信小程序文件结构。
三、一些开发经验与技巧
如何用 scss 开发小程序样式
1、如果使用 Visual Studio Code 编辑器开发
可安装插件“easySass”，打开用户配置文件 setting.json 文件进行相关配置，加入如下代码：
"easysass.formats": [{
"format": "expanded",
"extension": ".wxss"
}]
重启编辑器即可。
配置完毕便可在.scss文件编辑代码，保存直接在同一文件目录下自动生成同名.wxss文件。
2、如使用其他编辑器
此方法稍逊于方法1。
需先使用 npm安装 sass，然后在相应文件夹控制台下运行：
sass --watch sass文件夹名:css文件夹名 eg: sass --watch style:css
sass --watch xx.scss:xx.wxss
使用Visual Studio Code 编辑器开发-相关配置
微信小程序是用.wxml文件来表示页面结构，用.wxss文件来表示样式表，vscode是不能识别这两种扩展名的，因此没有语法高亮，也不能用emmet。
修改用户设置中的文件关联,将.wxml映射到.html,.wxss映射到.css，语法高亮和emmet就都搞定了。
1、打开用户配置文件 setting.json，插入如下代码：
"files.associations": {
"*.html": "html",
"*.wxss": "css",
"*.wxml": "html"
},
2、安装插件
*识别wxml：搜索安装 vscode wxml;
*识别wxss:搜索安装 小程序。
3、安装插件：vscode-wechat
关于适配
小程序自带适配方式，无需开发者外加脚本或任何操作。适配规则如下：
WXSS支持的单位有px、rem和rpx，其中rem和rpx可以针对屏幕容器进行适配，px则为固定尺寸。
其中1rpx=0.5px，在WXSS和WXML中定义的rpx单位最终会转换为在手机端可以识别的rem单位。
故开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 所以工程师拿到750的设计稿，在PS中量取的容器大小，可以直接定义为rpx，不需要进行2倍尺寸的换算。
注：rpx的单位不光在样式中会自适应，写在WXML的style里也会根据屏幕自适应。但是以 js 方式获取到的尺寸值是以 px 为单位，运算的值也需转换成 px，如：<view style="max-height:{{winHeight-10}}px"></view>，这里的10其实相当于20rpx，而 winHeight 是依赖于 js获取而来的值，也是 px 为单位的。
关于wxml
1、不能使用< br >来换行；
2、< text >标签内只能放< text >标签，不能放其他如< span >，除了text文本节点以外的其他节点都无法长按选中；
3、WXML语言必须包括开始标签和结束标签；
4、图片标签是<image></image>而不是习惯性的 html 语言< img >标签
wx.request(OBJECT)
wx.request发起的是 HTTPS 请求。一个微信小程序，同时只能有5个网络请求连接。
一些常用库可否使用
脚本内是无法使用浏览器中常用的window对象和document对象的，基于这一点，像zepto/jquery这种操作dom的库就被完全抛弃了。
小程序也可获取节点
wx.createSelectorQuery()
返回一个SelectorQuery对象实例。可以在这个实例上使用select等方法选择节点，并使用boundingClientRect等方法选择需要查询的信息。
Page({
queryMultipleNodes: function(){
var query = wx.createSelectorQuery()
query.select(\'#the-id\').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){//res 返回两个对象
res[0].top // #the-id节点的上边界坐标
res[1].scrollTop // 显示区域的竖直滚动位置
})
}
})
关于回到顶部或滚动到相关位置
1、通过scroll-view来监听scroll，点击返回按钮时改变其scroll-top的方式，不过此方法限制了要使用scroll-view布局的方式；
2、使用页面滚动函数wx.pageScrollTo(OBJECT)以及获取WXML节点信息的相关函数，通过这两个可实现让页面滚动至顶部或其他位置。
html
<view class="container" bindtouchmove="handletouchmove">
...
</view>
<!-- 返回顶部按钮 -->
<view class=\'gotop\' wx:if="{{showGoTop}}" bindtap=\'backToTop\'>
<image src=\'../../images/icon/gotop.png\' mode=\'widthFix\'></image>
</view>
js
Page({
data:{
showGoTop: false,
},
handletouchmove: function () {
this.queryMultipleNodes();
},
//获取屏幕滚动出去的高度
queryMultipleNodes: function () {
var self = this;
var query = wx.createSelectorQuery()
query.select(\'#container\').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
res[0].top // 节点的上边界坐标
//如果顶部的距离超过200 就显示GoTop按钮
if(res[0].top < -300) {
self.setData({
showGoTop: true
})
}
else {
self.setData({
showGoTop: false
})
}
})
},
//返回顶部
backToTop: function () {
wx.pageScrollTo({
scrollTop: 0,
duration: 400
});
this.setData({
showGoTop: false
})
}
})
四、走过的弯路
如果 data 里面的是变量，则只有第一次加载时会取数据，再次进入不会重新取，例如
page({
data:{
num:wx.getStorageSync(\'num\'),
}
})
即使本地存储里面的 num 的值不断在变，这里的 data 也不会更新，解决方法是：在页面 onLoad 时获取变量，然后再 setData 进 data 里面。
小程序对跳转链接、识别二维码有限制
跳转链接可使用<web-view>，但是，需要在开发者后台配置域名白名单，域名需要icp备案，还需要此小程序的验证文件，把验证文件放到这个域名的服务器下，故需要有操作这个域名的服务器的权限，相当于需要拥有这个域名。
注：使用<web-view>跳转链接的时候，在PC端微信开发者工具中调试的时候是可以跳转成功的，微信扫码预览或者真正环境下是不可以的。
识别二维码可以使用wx.previewImage点击放大二维码图片，长按图片识别。 注意：二维码图片必须是 string 或者 string array 类型的https线上链接，不能是本地连接。
但是，经过试验，此方法只能顺利识别小程序类的二维码，并不能识别普通链接二维码。
分享功能调整
自开发者工具2.0.8版本起，微信分享接口 onShareAppMessage() 将不再识别分享成功事件，即不能在 success 事件下 do something
