微信小程序开发个人笔记

1，配置文件.json

小程序的全局配置app.json和页面配置page.json
每单页页面也有相应的.json文件，设置每个页面中.json配置，会覆盖与app.json相同的配置项。
如下：是一个包含了所有配置选项的简单配置app.json

"pages": [//设置页面的路径
"pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合
"pages/logs/logs" 
],
"window": { //设置默认窗口的表现形式
"navigationBarBackgroundColor": "#ffffff",//顶部导航栏背景色
"navigationBarTextStyle": "black",//顶部导航文字的颜色 black/white
"navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字
"backgroundColor": "#eeeeee", //窗口的背景色
"backgroundTextStyle": "light", //下拉背景字体、loading 图的样式，仅支持 dark/light
"enablePullDownRefresh":"false"，//是否支持下拉刷新 ，不支持的话就直接不写！
"disableScroll":true,//  设置true不能上下滚动，true/false，注意！只能在page.json中有效，无法在app.json中设置该项。
}, 
"tabBar": { //底部tab或者顶部tab的表现，是个数组，最少配置2个，最多5个
"list": [{//设置tab的属性，最少2个，最多5个
"pagePath": "pages/index/index",//点击底部tab跳转的路径
"text": "首页",//tab按钮上的文字
"iconPath":"../img/a.png",//tab图片的路径
 "selectedIconPath": "../img/a.png"//tab在当前页，也就是选中状态的路径
},   { 
"pagePath": "pages/logs/logs",
"text": "日志"
}] ，
"color":"red",//tab的字体颜色
   "selectedColor":"#673ab7",//当前页tab的颜色，也就是选中页的
   "backgroundColor":"#2196f3",//tab的背景色
   "borderStyle":"white",//边框的颜色 black/white
   "position":"bottom"//tab处于窗口的位置 top/bottom
},
"networkTimeout": {//默认都是60000秒一分钟
"request": 10000,//请求网络超时时间10000秒
"downloadFile": 10000，//链接服务器超时时间10000秒
"uploadFile":"10000",//上传图片10000秒
"downloadFile":"10000"//下载图片超时时间10000秒
}, 
"debug": true//项目上线后，建议关闭此项，或者不写此项
}```
####2，逻辑层.js
小程序的逻辑层是js编写，但因为小程序不是运动在浏览器中，所以js在web中的一些功能不能用，如document，windows等  。
app.js有全局的小程序生命周期，page.js有自己本页面的生命周期

**2.1 注册小程序App.js**
```>
注意：
1,必须在app.js中注册微信小程序，全局只有一个
2,不能再定app（）内的函数中调用getApp（），使用this就可以拿到app的实例。
3,不要在onLaunch的时候getCurrentPage（），此时page还没有生成
4,通过其他子页面调用getApp（）获取实例后，不要私自调用小程序全局的生命周期方法
5,var app=getApp（）获取小程序的实例
App ( {
   // 小程序生命周期的各个阶段
   onLaunch: function(){},//当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   onShow: function(){},//当小程序启动，或从后台进入前台显示，会触发 onShow
   onHide: function(){},//当小程序从前台进入后台隐藏，会触发 onHide
   onError: function(){},//当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   // 自定义函数或者属性，用 this可以访问
   ...
})

2.2 注册小程序的页面page.js
Page()用来注册一个页面，维护该页面的生命周期以及数据。

Page({
data: {//页面的初始数据//调用：{{text}} {{array[0].msg}}
 text: 'init data',
 array: [{msg: '1'}, {msg: '2'}]
},
    // 页面生命周期的各个阶段
    onLoad: function(){},//生命周期函数--监听页面加载
    onShow: function(){},//生命周期函数--监听页面初次渲染完成
    onReady: function(){},//生命周期函数--监听页面显示
    onHide: function(){},//生命周期函数--监听页面隐藏
    onUnload: function(){},//生命周期函数--监听页面卸载
    onPullDownRefresh: function(){},//页面相关事件处理函数--监听用户下拉动作,需要 在app.json中配置  "enablePullDownRefresh":"true" 允许上拉刷新
    onReachBottom: function(){},//页面上拉触底事件的处理函数
    onShareAppMessage: function(){//用户点击右上角分享
 return {
      title: '自定义分享标题',
      desc: '自定义分享描述',
      path: '/page/user?id=123'
    }
},

    // 自定义函数或者属性如：
  customData: { hi: 'MINA' }
    ...
})

2.3，注意事项
setData（）
不能直接数据 ，this.data.text="xxxxx" //这是错误的，
this.setData ({ //在这里面修改数据的值，和react的setdata有些类似})//这是正确的
这里记住this有作用域的问题 ，如在局部函数中使用需.bind(this),或其他

getApp（）
如果需要全局的数据可以在app.js中设置。如：

App({// app.js
  globalData: 1
})
// 某page.js
console.log(getApp().globalData)```
 

**2.4，公共模块util.js**
公共模块方法需要通过module.exports对外暴露接口。
使用的时候需要require(path)将文件引入。如：
```>
function sayHello(name) {//公共方法util类
  console.log(`Hello ${name} !`)
}
module.exports.sayHello = sayHello//用module.exports 对外暴露接口

//先引入文件，是新建的一个utils包，公共方法在util.js里面
var util = require('../../utils/util.js')
Page({//调用类
  onLoad: function () {//  使用时，用util引用名调用，如：util.sayHello（）
 util.sayHello('我是传的值');
  }
})

3，视图层WXML

视图层的数据绑定 均来自于Page中的data，修改值则是this.setData
数据绑定使用{{变量}}双大括号将变量包起来

**条件渲染**
 123334
 123334 
大于5我就显示了 

//这是一个if if else的判断
 1 //如果大于5显示1
 2 //否则如果大于2显示2
 3 //否则显示3
 
//block只是一个包装元素，并不会在页面上做任何渲染，只受属性控制。
   view1 
   view2 

wx:if vs hidden
wx:if 是惰性的，运行时不渲染，
《hidden 组件始终渲染，只是简单的显示隐藏，如果需要频繁切换则用hidden》



**列表渲染** 
 view wx:for="{{array}}"> {{index}}:{{item}} //默认index是当前下标的变量名，数组当前项是item，如果是object类型则是item.xxx
也可以另取名用wx：for-index=“xx”来指定当前数组下标的变量名
            wx：for-item="xx" 来指定当前元素的变量名 
//输出的结果是0:1,1:2,2:3,3:4,4:5
  page.jsPage({ data: { array: [1, 2, 3, 4, 5] }}) 
  block wx:for
类似block wx:if，也可以将wx:for用在标签上
**wx：kay **
如果列表中的项需要动态添加到列表中，并希望项目保持原有的特征和状态使用wx:kay
wx:kay 有两种形式提供
1，字符串  wx:kay=“unique”
2，保留关键字 wx:kay="*this"
 

**算法运算**
 {{a + b}} + {{c}} + d 

**字符串运算**
{{"hello" + name}}


也可以用扩展运算符 ... 来将一个对象展开
{{...obj1}} //a:1,b:2   可以把obj对象完全展开
obj1: {
      a: 1,
      b: 2
    },
注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面

3.1，wxml模版的使用
name定义组件模版的名称，引用模版的时候使用is属性指定模版的名字，is可以进行简单的三木运算。需要传入模版需要的data数据。因为模版拥有自己的作用域，所以只能使用data传入数据，而不能直接{{}}使用。

----------------------------------
使用时：