微信小程序学习之路

作者 江辉 日期 2017-08-21
微信小程序学习之路

1、注册

尽然要开发小程序,先注册一个自己的小程序号吧。https://mp.weixin.qq.com/

2、体验

不要急于开发,先体验一下官方的demo,或者大厂已开发的小程序。

官方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