*************** 小程序项目---整理 ***************
1.tabbar
icon--81*81
最少2个、最多5个tab
2.app.json 是对当前小程序的全局配置
包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
3.工具配置 project.config.json
个性化配置例如界面颜色、编译配置等等
4. 修改数据
this.setData({})
5.app.json 的 pages 字段:
当前小程序的所有注册页面路径，不注册则不能使用
如果页面路径放在最上面，则打开是首页
6.本地存储能力
wx.setStorageSync(‘logs‘, logs);
wx.getStorageSync(‘logs‘) ;
7.显示隐藏
wx:if="{{}}"
hidden="{{}}"
注意：
需要频繁切换的情景下，用 hidden 更好；
如果在运行时条件不大可能改变则 wx:if 较好。
8.添加class操作，使用三元表达式
{{mask?‘bar‘:‘‘}}
9.换行符
\n 换行
友情提示：必须在<text>标签中！
10.富文本
<rich-text nodes="{{nodes}}" ></rich-text>
nodes是带标签的数据，最好是array
11.生命周期
注册程序---APP()
onLaunch: 监听小程序初始化 （全局只触发一次）
onShow：小程序启动，或从后台进入前台显示
onHide：从前台进入后台
**onLaunch, onShow 参数 ---options
path：打开路径
query：打开query
注册页面---page()
onLoad:页面加载 （一个页面只会调用一次）
onShow:页面显示（每次打开页面都会调用一次）
onHide: 页面隐藏 （当navigateTo或底部tab切换时调用）
onReachBottom：页面上拉触底
onPullDownRefresh: 下拉
onShareAppMessage：点击右上角触发
onPageScroll: 页面滚动 参数e ---scrollTop
**onLoad参数
query：打开页面传的参数
json文件：
onReachBottomDistance：XX
页面上拉触底事件触发时距页面底部距离，单位为px
12.下拉刷新
当前页面json文件开启
enablePullDownRefresh：true
监听用户下拉刷新事件
onPullDownRefresh(){}
当处理完数据刷新后，
wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
13.列表渲染
1.需要加wx:key="xxx",否则warn
2.设置index和item
wx:for="{{array}}" wx:key="xxxx"
wx:for-index="idx" wx:for-item="itemName"
14.条件渲染
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
15.block
包装元素，不会在页面中做任何渲染，只接受控制属性。
16.事件
bindtap || bind:tap
17.结构存储
存：data-id=""；
取：e.currentTarget.dataset.id
18.全局数据---app.gloabal
globalData: {
userInfo: null,
login_session:null
}
var app = getApp();
app.globalData.userInfo=1;
19.模块化
模块存：
可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。
需要注意的是：
- exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。
- 小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。
module.exports={
api
}
模块取：
在需要使用这些模块的文件中，使用 require(path) 将公共代码引入。
var common = require(‘common.js‘)
20.wxss---尺寸单位
- rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
1px = 2rpx;
样式导入
@import "common.wxss";
21.全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
22.事件冒泡
bind事件绑定不会阻止冒泡事件向上冒泡；
catch事件绑定可以阻止冒泡事件向上冒泡。
<view id="middle" catchtap="handleTap2">
<view id="inner" bindtap="handleTap3">
23.动画
var animation = wx.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
})
animation.opacity(n).scaleY(y).step()
this.setData({
xxx: animation.export()
});
注意：动画需要初始化，可封装城函数
24.wx.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。
可通过 getCurrentPages()获取当前的页面栈，决定需要返回几层。
25.获取系统信息
wx.getSystemInfo({
success: function(res) {
console.log(res.model)
console.log(res.pixelRatio)
console.log(res.windowWidth)
console.log(res.windowHeight)
console.log(res.language)
console.log(res.version)
console.log(res.platform)
}
})
26.设置导航条
wx.setNavigationBarTitle({
title: ‘当前页面‘
})
27.wx.navigateTo()
保留当前页面，跳转到某个页面，使用wx.navigateBack可以返回到原页面。
// 跳转
handleGo(e) {
let url = e.currentTarget.dataset.go;
wx.navigateTo({
url: url
});
}
tip: wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面。
28.客服
session-from="weapp" 区分来自哪里
<contact-button
type="default-light"
size="20"
session-from="weapp"
>
</contact-button>
button 组件通过设置 open-type="contact" 亦可进入客服会话
29.转发
只有写了分享函数，页面右上方菜单才会出现转发选项，返回一个对象。
options有两个参数
from:来自哪里;
target:如果 from 值是 button，则 target 是触发这次转发事件的 button，否则为 undefined;
onShareAppMessage(options){
// console.log(options);
if(options.from==‘menu‘){
app.globalData.share.path = XXXX;
return app.globalData.share
}
}
share: {
title: ‘查询售楼处电话,就用新房007！‘,
path: ‘/pages/index/index‘, //路径
success: function (res) {
// 转发成功
},
fail: function (res) {
// 转发失败
}
}
*********************** 问题 ************************
1.微信小程序点击清除 input 内容，会穿透按钮点击到 input
解决：把搜索框分成了两部分，左边是 input，右边为清除按钮。这样就避免了点击穿透到 input 了。
2.小程序地图打开，使用的腾讯地图，而我们使用的坐标是百度地图的坐标（坐标位置的不同）
解决：使用网上的地图坐标转换js，把百度坐标转成合适的坐标
3.小程序页面授权跳转，因为首页使用的是tabbar，所以能跳出去，出去之后跳不回来
解决：使用wx.switchTab跳转
4.小程序swiper组件不是我们所需要的
解决：使用网上的we-swiper
5.页面scroll-view高度问题，page高度问题
解决：page可以使用100%，scroll-view可以使用vh
6.页面图片预览，或者说图片保存并扫码
解决：使用wx.previewImage，之后就能预览图片，并且长按也能保存和扫码，但是扫码只识别小程序码
7.后台接口返回标签，渲染HTML格式的内容，可以使用rich-text组件
解决：使用组件rich-text把内容放在nodes里面
<rich-text nodes=‘{{html}}‘></rich-text>
8.点击之后改变样式，hover-class="changColor"
解决：<view hover-class="active" class=‘inputs‘>XXXX</view>
9.获取某个标签的信息，比如高度
解决：小程序没有window对象，所有原生组件（包括view）、自定义组件等，通过操作它们的实例，可以获取到组件的信息。
let query = wx.createSelectorQuery()
query.select(‘#id‘).boundingClientRect()
query.exec((res) => {
console.log(res) //当前组件实例的属性
})；
10.iPhoneX的处理
解决：
1.获取系统信息wx.getSystemInfo判断是否是iPhoneX;
2.定义全局变量，如果是iPhoneX则为true；
3.页面定义占位标签高度为68rpx，定位到底部，wx:if控制；定义页面data，依据全局数据判断；
4.让原本固定在底部的导航，控制其bottom值，使用wx.createSelectorQuery获取吸顶标签的高度，把高度给导航的bottom值。
*********************** 注意事项 ************************
1.为什么脚本内不能使用window等对象
页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件
为什么 zepto/jquery 无法使用
zepto/jquery 会使用到window对象和document对象，所以无法使用。
2.wx.navigateTo无法打开页面
一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo
3.本地资源无法通过 WXSS 获取
background-image：可以使用网络图片，或者 base64，或者使用<image/>标签
4.如何修改窗口的背景色
使用 page 标签选择器，可以修改顶层节点的样式
5.为什么 map 组件总是在最上层
map、canvas、video、textarea 是由客户端创建的原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。 原生组件暂时还无法放在 scroll-view 上，也无法对原生组件设置 css 动画。
