1、注册
尽然要开发小程序，先注册一个自己的小程序号吧。https://mp.weixin.qq.com/
2、体验
不要急于开发，先体验一下官方的demo，或者大厂已开发的小程序。
3、简单过一下小程序设计文档
https://mp.weixin.qq.com/debug/wxadoc/design/index.html
主要看一下尺寸。 微信里面里面尺寸用的 rpx pt
设计稿以iphone 6（1334*750）为设计标准。这时候写代码 1px等于1rpx
4、小程序的生命周期
Page({
/**
* 页面的初始数据
*/
data: {
books:[]
},
/***
* 自定义事件
*/
goto: function (e) {
let id = e.currentTarget.id;
wx.navigateTo({
url: '../evaluate/evaluate?id=' + id
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad () {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady () {
// TODO: onReady
},
/**
* 生命周期函数--监听页面显示
*/
onShow () {
// TODO: onShow
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide () {
// TODO: onHide
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload () {
// TODO: onUnload
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh () {
// TODO: onPullDownRefresh
}
});
|
5、小程序目录说明、文件说明
| 文件类型 |
必需 |
作用 |
| js |
是 |
页面逻辑、自定义事件 |
| wxml(类似于htmll) |
是 |
页面结构 |
| wxss(类似于css) |
否 |
页面样式表 |
| json（配置title颜色之类的配置文件） |
否 |
页面配置 |
目录说明
——pages
————index.js 这页面的逻辑
————index.wxml 这页面的布局
————index.json 单独配置这个页面的样式
————index.wxss 这个页面样式
—— app.js 系统一开始初始化
—— app.json 系统公用的配置信息
—— app.wxss 系统公用的样式
app.json说明
{
// All pages must be here.
// First is default to view
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
// 需先注册，后时使用
"pages": [
"pages/index/index"
// Dont remove this comment
],
// Window configuration
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
"window": {
// 类型：HexColor；默认值：#000000
// 导航栏背景颜色，如"#000000"
"navigationBarBackgroundColor": "#35495e",
// 类型：String；默认值：white
// 导航栏标题颜色，仅支持 black/white
"navigationBarTextStyle": "white",
// 类型：String；默认值：无
// 导航栏标题文字内容
"navigationBarTitleText": "书香分享",
// 类型：HexColor；默认值：#ffffff
// 窗口的背景色
"backgroundColor": "#000000",
// 类型：String；默认值：dark
// 下拉背景字体、loading 图的样式，仅支持 dark/light
"backgroundTextStyle": "light",
// 类型：Boolean；默认值：false
// 是否开启下拉刷新，详见页面相关事件处理函数。
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=1476197491005#页面相关事件处理函数
"enablePullDownRefresh": false
},
// Tab bar configuration
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
// 底部按钮
"tabBar": {
"color": "#999999",
"selectedColor": "#35495e",
"borderStyle": "white",
// "backgroundColor": "#f5f5f5",
"backgroundColor": "#ffffff",
"list": [
{
"text": "我的",
"pagePath": "pages/index/index",
"iconPath": "images/my.png",
"selectedIconPath": "images/my-fill.png"
},
{
"text": "发现",
"pagePath": "pages/attention/attention",
"iconPath": "images/explore.png",
"selectedIconPath": "images/explore-fill.png"
},
{
"text": "帮助",
"pagePath": "pages/help/help",
"iconPath": "images/help.png",
"selectedIconPath": "images/help-fill.png"
}
]
},
// Network timeout configuration
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
// Debug log to console
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
"debug": true
}
|
6、数据绑定
数据绑定是双向的。值变化了，对应的显示的数值也会跟着变化，详细见链接
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html
6.1 block 空标签说明
这是一个空标签，可以使用任何逻辑判断 wx:if等标签
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
|
7、事件绑定
假如我要对某一个 view 增加一个触摸事件。我们如何做了？代码如下
index.wxml
<view id="tapTest" data-hi="WeChat" bindtap="tapMe"> Click me!
<view catchtap="tapMe2">click me 2!</view>
</view>
|
index.js
Page({
tapMe: function(event) {
console.log(event)
},
tapMe2 function(event) {
console.log(event)
}
})
|
我们通过bind* 去绑定事件，具体组件能支持那些事件可以参考具体的组件文档
绑定事件名称要一致 ,catchtap会阻止事件冒到tapMe事件
8、组件
学习建议:参考官网demo。对每个组件有印象。开发的时候具体看文档
9、API
学习建议：参考官网demo。对每个API有印象。开发时候看具体文档
10、开发工具推荐
我推荐以下的开发框架（https://github.com/zce/weapp-demo）。
- 开发阶段与生产阶段分离。
- 自动化生成新页面所需文件并添加到配置中。
- 以Standard Code Style校验全部的js和json文件。
- 开发阶段json配置文件可以有注释，方便备注。
- 代码中集成部分文档内容，减少查文档的时间。
- 开发阶段可以使用less完成样式编码，原因你懂得~ （如果你了解这些，当然可以支持sass等其他预处理样式）。
- 借助babel自动进行ES2015特性转换，放心使用新特性。
- 开发阶段用xml文件后缀取代wxml后缀，避免在开发工具中配置代码高亮。
- Source Map
- Travis CI
