小程序官网
开始了解小程序可以直接到官网，因为该官网非常详细和友好。
小程序开发准备
在官网上直接注册小程序账号，可以管理你的小程序的权限，查看数据报表，发布小程序等操作。登录账号，获取对应的小程序的 AppID（创建小程序项目需要用到）。
接着下载微信开发者工具，建立了“普通快速启动模板”（选择空目录下才有此选项），或者直接选择小程序官方Demo或者weui小程序版UI当做学习Demo
创建小程序项目
小程序代码构成
微信小程序目录
wxml文件
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
这个其实就是“html”，不能使用W3C的标签，转而使用的是微信自定义的标签，常见的就是用<view>代替<div>，具体有哪些标签可以查看官网微信基础组件。页面结构是以<page>为父节点节点，没有<html>和<body>。
小程序wxml页面
下面代码就是简单的数据绑定和事件：
<!-- wxml代码 -->
<view bindtap="add"> {{count}} </view>
Page({
data: {
count: 1
},
add: function(e) {
this.setData({
count: this.data.count + 1
})
}
})
js文件
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。App() 必须在 根目录下的app.js 中注册，且不能注册多个。
App({
onLaunch: function(options) {
// 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
},
onShow: function(options) {
// 当小程序启动，或从后台进入前台显示，会触发 onShow
},
onHide: function() {
// 当小程序从前台进入后台，会触发 onHide
},
onError: function(msg) {
// 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
console.log(msg)
},
globalData: {
// 全局变量，注意App()和Page不同，一个是globalData,一个是data
name: 'Gensen'
}
//开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问
myMethod: function() {
console.log(this.globalData.globalData); // "Gensen"
}
})
Page()函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。相对一个全局一个局部，对应每个页面都有一个。
Page({
data: {
// 页面的初始数据
text: "This is page data."
},
onLoad: function(options) {
// 生命周期函数--监听页面加载
// 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
},
onReady: function() {
// 生命周期函数--监听页面初次渲染完成
// 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
// 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
},
onShow: function() {
// 生命周期函数--监听页面显示
},
onHide: function() {
// 生命周期函数--监听页面隐藏
// 当navigateTo或底部tab切换时调用。
},
onUnload: function() {
// 生命周期函数--监听页面卸载
// 当redirectTo或navigateBack的时候调用。
},
onPullDownRefresh: function() {
// 页面相关事件处理函数--监听用户下拉动作
// 需要在app.json中的`window`选项中或页面配置page.json中开启`enablePullDownRefresh`。
// 当处理完数据刷新后，`wx.stopPullDownRefresh`可以停止当前页面的下拉刷新。
},
onReachBottom: function() {
// 页面上拉触底事件的处理函数
},
onShareAppMessage: function () {
// 用户点击右上角转发
return {
title: '自定义转发标题',
path: '/page/logs/logs'
}
},
onPageScroll: function() {
// 页面滚动触发事件的处理函数
},
onTabItemTap(item) {
// 当前是 tab 页时，点击 tab 时触发
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问
viewTap: function() {
// 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致
this.setData({
text: 'Set some data for updating view.'
}, function() {
// 回调函数
})
},
customData: {
hi: 'MINA'
}
})
Page 实例的生命周期
js部分还包括路由、模块、API（小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等）后续再细讲。
wxss文件
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。其实就是CSS改了个后缀名，不同的地方是多了rpx尺寸单位和样式导入，样式选择器只能使用一部分，像后代子代选择器就不能用了，目前支持的选择器如下：
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .class | .intro | 选择所有拥有 class="intro" 的组件 |
| #id | #firstname | 选择拥有 id="firstname" 的组件 |
| element | view | 选择所有 view 组件 |
| element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
| ::after | view::after | 在 view 组件后边插入内容 |
| ::before | view::before | 在 view 组件前边插入内容 |
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
小程序全局样式设置
配置文件
app.json
用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。程序启动默认的第一个页面，就是app.json的pages中的第一个页面。
微信小程序app.json配置
注意：json文件不能注释，不然会报错（上面图片大误）
page.json
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
结尾
先简单介绍下微信小程序代码结构和不同文件对应的功能和作用，后续有空将细讲某个模块或者一些常用的应用场景。
网友评论