微信小程序开发小总结

小程序开发文档使用说明

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

  • 简易教程---介绍小程序开发的一些基本状况 开发方式,项目目录等等,看完这些,基本能了解怎么跑起来项目,在哪块写代码,各个文件的做用。
  • 框架--- 这部分是小程序开发的核心,小程序采用视图和逻辑层代码相分离的结构,若是你用过vue angular react 这部分也不难理解,可是也有一些区别。
  • 组件---小程序的每一个标签至关于一个组件,官方已经预约义了一些经常使用的标签组件,可以知足平常基本功能的使用,这部分分时小程序开发高效的一个缘由,基础的组件都定义好,须要用就行。这部分的文档,只要过一下,大概有那些组件,用的时候再仔细阅读文档。
    开发中经常使用的组件:html

    • 视图容器    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 是一个比较使人迷惑的地方 ,不写会报错,可是随便给一个字符也不合理,最好是循环中的一个标记惟一性的键值,好比idvue

3 事件绑定

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

4.模块开发

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

5.页面的生命周期

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

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

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

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来调用各页面的方法和更新数据api

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