微信小程序开发小总结

小程序开发文档使用说明

小程序的文档分为简易教程、框架、组件、API 、工具
https://developers.weixin.qq....

简易教程---介绍小程序开发的一些基本情况开发方式，项目目录等等，看完这些，基本能了解怎么跑起来项目，在哪块写代码，各个文件的作用。
框架--- 这部分是小程序开发的核心，小程序采用视图和逻辑层代码相分离的结构，如果你用过vue angular react 这部分也不难理解，但是也有一些区别。
组件---小程序的每个标签相当于一个组件，官方已经预定义了一些常用的标签组件，能够满足日常基本功能的使用，这部分分时小程序开发高效的一个原因，基础的组件都定义好，需要用就行。这部分的文档，只要过一下，大概有那些组件，用的时候再仔细阅读文档。
开发中常常使用的组件:
- 视图容器 view scroll-view swiper
- 基础内容 text
- 媒体 image videoaudio
- 表单 button input checkbox label picker
- 画布 canvas
- 地图 map
API---主要，可以的调起微信提供的能力，如果你在前端开发中没有遇到过的功能，都能在这里查到，比如小程序的头部，页面的刷新，本地存储，获取用户信息，支付功能等。
工具--- 这部分没有什么好说的，微信开发开始还是用微信自己的开发工具比较方便。

开发中常见问题

1.整个小程序的配置

小程序的全局配置在 app.json 中，小程序每添加一个页面，都要在全局中注册，文档：
https://developers.weixin.qq....

2 列表渲染

小程序的列表渲染和其他的前端模板语言相似，但可以用wx:for-item="itemname" 来指定每次循环对象的名字，可以用wx:for-index="indexname" 来指定循环序列的键值，这个功能就是指定循环数组时的键和值的别名。
列表中的wx:key 是一个比较令人迷惑的地方，不写会报错，但是随便给一个字符也不合理，最好是循环中的一个标记唯一性的键值，比如id

3 事件绑定

小程序的事件绑定，写法上有些区别，主要2种 bind:youevent="eventhandle" catch:youevent="eventhandle" catch 能阻止事件冒泡

4.模块开发

小程序可以使用common.js 的模块开发方式。moudle.exports /exports 导出模块， require (‘file.js’) 的方式引入模块

5.页面的生命周期

onLoad 生命周期函数--监听页面加载（可以在这里异步的请求数据，初始化页面）
onReady 生命周期函数--监听页面初次渲染完成（在这里，可以获取页面视图的布局数据）
onShow 生命周期函数--监听页面显示
onHide 生命周期函数--监听页面隐藏
onUnload 生命周期函数--监听页面卸载

6.页面视图中元素的位置和大小

在小程序开发过程中肯定会遇到要获取页面中元素的位置和元素的宽高。这部分在文档=》api=》界面
wxml节点信息中找相应的api

getRect: function(){
    wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
      rect.id // 节点的ID
      rect.dataset // 节点的dataset
      rect.left // 节点的左边界坐标
      rect.right // 节点的右边界坐标
      rect.top // 节点的上边界坐标
      rect.bottom // 节点的下边界坐标
      rect.width // 节点的宽度
      rect.height // 节点的高度
    }).exec()
  },

7.交互反馈

交互反馈详情在文档=》api=》界面=》交互反馈
一个成功的反馈

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

8.跨页面更新数据

小程序整个应用是用App（）构造方法组成，页面是用Page() 构造方法注册。小程序只有组件才有自定义事件，在Page() 无法使用自定义事件通过触发事件在页面间传递数据不可行，微信提供获取整个应用实例的getApp() 方法，这样可以获取app 的实例，通过 pages = getCurrentPages(); 获取打开页面的列表，通过 pages来调用各页面的方法和更新数据

var pages = getCurrentPages();//获取页面栈
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面
//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
  mdata:1 
})；
//调用上一个页面的方法来更新数据
prePage.updatefunc(altdata)