小程序的文档分为 简易教程、框架、组件、API 、工具
https://developers.weixin.qq....javascript
组件---小程序的每一个标签至关于一个组件,官方已经预约义了一些经常使用的标签组件,可以知足平常基本功能的使用,这部分分时小程序开发高效的一个缘由,基础的组件都定义好,须要用就行。这部分的文档,只要过一下,大概有那些组件,用的时候再仔细阅读文档。
开发中经常使用的组件:html
小程序的全局配置在 app.json 中,小程序每添加一个页面,都要在全局中注册,文档:
https://developers.weixin.qq....前端
小程序的列表渲染和其余的前端模板语言类似,但能够用wx:for-item="itemname" 来指定每次循环对象的名字,能够用wx:for-index="indexname" 来指定 循环序列的键值,这个功能就是指定循环数组时的键和值的别名。
列表中的wx:key 是一个比较使人迷惑的地方 ,不写会报错,可是随便给一个字符也不合理,最好是循环中的一个标记惟一性的键值,好比idvue
小程序的事件绑定,写法上有些区别,主要2种 bind:youevent="eventhandle" catch:youevent="eventhandle" catch 能阻止事件冒泡java
小程序可使用common.js 的模块开发方式。moudle.exports /exports 导出模块, require (‘file.js’) 的方式引入模块react
onLoad 生命周期函数--监听页面加载(能够在这里异步的请求数据,初始化页面)
onReady 生命周期函数--监听页面初次渲染完成(在这里,能够获取页面视图的布局数据)
onShow 生命周期函数--监听页面显示
onHide 生命周期函数--监听页面隐藏
onUnload 生命周期函数--监听页面卸载json
在小程序开发过程当中确定会遇到要获取页面中元素的位置和元素的宽高。这部分在 文档=》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() },
交互反馈详情在 文档=》api=》界面=》交互反馈
一个成功的反馈小程序
wx.showToast({ title: '成功', icon: 'success', duration: 2000 })
小程序整个应用是用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)