微信小程序
简介
腾讯在微信中推出的一种介于 Native App 和 Web App 之间的程序
程序中的程序，生态中的生态
开发工具的下载与使用
下载地址: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
工具的使用是比较简单的，可以参照官方提供的文档https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/debug.html
目录结构的说明
创建项目的时候勾选在当前目录中创建 quick start 项目，可以生产一个基础的项目，文件结构如下：
pages
index
index.js
inde.json
inde.wxml
index.wxss
logs
logs.js
logs.json
logs.wxml
logs.wxss
utils
util.js
app.js
app.json
app.wxss
结构解释说明
-
pages小程序中所有的页面都会存在此文件夹下，每个页面都以一个文件夹的形式存在，里面文件分为四种 -
index/index.jsindex页面的逻辑代码 -
index/inde.jsonindex页面的数据代码 -
Index/index.wxmlindex页面的结构代码 -
index/index.wxssindex页面的样式代码 -
utils一些工具类，放在此文件夹下 -
app.js小程序主文件，配置app相关的信息。整个app的生命周期方法也在此文件中 -
app.json配置整个程序相关信息。例如：主题颜色，tabbar如何切换等等 -
app.wxss配置整个微信小程序的全局样式，可以认为是所有页面的根样式
特殊文件格式说明
在微信小程序中，不是直接使用HTML和CSS进行页面的编写，而是进行了一定的升级
*.wxml代表小程序中页面的结构文件，*.wxss代表小程序中页面的样式文件，每个页面都应该有这两个同名文件
index.wxml
在wxml文件中，可以发现，不再是html中的div、img、span等标签，而是使用了view、image、text等标签
view === divimage === imgtext === p
wxml中的标签和HTML中的标签作用一致，只是要求这么编写而已
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
index.wxss
wxss和css变化到不是很大，除了新增一个单位 rpx以外，其它基本一致
rpx是小程序中的长度单位，好处就是会跟着屏幕变化而变化
如果在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，即1rpx = 0.5px
换算规则如下：
| 设备 | rpx => px | px => rpx |
|---|---|---|
| iPhone 5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone 6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone 6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
注意：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准,单位换算相对简单
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
更换项目首页、动态数据、事件绑定
创建的项目中，有个默认的首页，我们把它换掉，换成垂直和水平居中的一个大文字
-
在
app.json文件中添加新页面
app.json文件中有个pages的位置，里面放置的小程序页面的路径。
在小程序中，所有的页面，都需要在app.json的pages中进行注册。
为了提高开发效率，没必要分别创建home.js、home.json、home.wxml、home.wxss这些文件，只需要修改app.json中pages后面的内容即可{ "pages":[ "pages/home/home", "pages/index/index", "pages/logs/logs" ] }pages对应的是一个数组，在第一个位置添加
"pages/home/home"，意为在pages文件夹下创建home文件夹，后面的home代表文件夹中所有文件的名称
注意: 路径的位置很重要，小程序会认为在pages对应的数组中
第一个元素的路径为首页 -
添加结构
打开pages/home/home.wxml文件，修改里面的代码为如下：<view class="home"> <text>HOME PAGE</text> </view> -
添加样式
打开pages/home/home.wxss文件，修改里面的代码如下：/* pages/home/home.wxss */ .home { height: 100%; height: 100%; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; background-color: #333; } .home text { font-size: 100rpx; color: white; font-weight: bold; }把页面设置高度为
100%，然后弹性布局，让内容居中，发现页面并没有居中，还需要添加另外一段代码
打开app.wxss文件，在最上面添加如下代码：page { height: 100%; }因为在小程序的网页中，
最外层的标签是page，然后内部才是home.wxml中的内容，所以想要让home.wxml中的view高度和屏幕一致，即需要先设置page高度和屏幕一致 -
页面效果如下
-
把页面数据改为动态数据
页面中的HOME PAGE文字为写死的，改为动态数据，方便后续更改
把数据放在home.js文件中，然后渲染到页面上
打开pages/home/home.js文件，自动生成了相关生命周期方法，找到data，添加数据data: { title: 'HOME PAGE' }打开
pages/home/home.wxml文件，修改代码如下：<view class="home"> <text>{{ title }}</text> </view>使用
{{ }}作为表达式，内部直接写变量，就可以进行变量的解析（和AngularJS、VueJS的表达式是一样的） 查看页面效果和网页中是完全一样的
-
添加行为 在页面中添加一个按钮，然后点击弹框显示
打开pages/home/home.js文件，在data后面添加事件data: { title: 'HOME PAGE' }, showInfo() { // 注意，添加的方法和data是同级的 wx.showModal({ title: '标题', content: '内容', success: function(res) { console.log('点击了确定的回调') }, fail: function(res) { console.log('点击了取消的回调') }, complete: function(res) { console.log('无论点击确定还是取消，都会执行的回调') } }) }打开
pages/home/home.wxml文件，添加代码和绑定事件<view class="home"> <text>{{ title }}</text> <button bindtap="showInfo">弹框显示</button> </view>页面效果如下：
-
添加新事件，修改数据
打开pages/home/home.js文件，添加事件，目的是修改数据，改变页面changeTitle() { // 修改数据 this.setData({ title: 'home page' }) },打开
pages/home/home.wxml文件，添加button，并绑定按钮<button bindtap="changeTitle">修改文件</button>页面效果
点击修改文字按钮，上面的文字就会更新
修改整个小程序的样式
app.json是对整个小程序的全局配置
可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口�背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释
更多可配置项可参考配置详解
{
"pages":[
"pages/home/home",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "微信 小程序",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "home",
"iconPath": "imgs/icon.png",
"selectedIconPath": "imgs/icon_selected.png"
},{
"pagePath": "pages/index/index",
"text": "index",
"iconPath": "imgs/icon.png",
"selectedIconPath": "imgs/icon_selected.png"
},{
"pagePath": "pages/logs/logs",
"text": "logs",
"iconPath": "imgs/icon.png",
"selectedIconPath": "imgs/icon_selected.png"
}]
},
"networkTimeout": {
"request": 20000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 20000
}
}
pages
接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成
每一项代表对应页面的【路径+文件名】信息
数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改
文件名不需要写文件后缀，因为框架会自动去寻找路径
.json,.js,.wxml,.wxss的四个文件进行整合
window
用于设置小程序的状态栏、导航条、标题、窗口背景色
tabBar
如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面
- 当设置 position 为 top 时，将不会显示 icon
- tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序
networkTimeout
可以设置各种网络请求的超时时间
修改单个页面相关信息
除了app.json以外，每个页面也都有自己的*.json文件，可以设置相关信息，只对当前页面有效
页面的配置比app.json全局配置简单得多，只是设置app.json中的 window配置项的内容，页面中配置项会覆盖 app.json 的 window中相同的配置项。
{
"navigationBarBackgroundColor": "#000",
"navigationBarTextStyle": "light",
"navigationBarTitleText": "导航栏标题文字",
"backgroundColor": "#fff",
"backgroundTextStyle": "light"
}
小程序主文件 app.js
在app.js文件中，App() 函数用来注册一个小程序
接受一个 object 参数，其指定小程序的生命周期函数等
App({
onLaunch: function(options) {
// 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
// Do something initial when launch.
},
onShow: function(options) {
// 当小程序启动，或从后台进入前台显示，会触发 onShow
// Do something when show.
},
onHide: function() {
// 当小程序从前台进入后台，会触发 onHide
// Do something when hide.
},
onError: function(msg) {
// 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
console.log(msg)
},
globalData: { // 全局的数据，在任何页面中都可以访问到
info: 'I am global data'
}
})
在子页面中可以获取代表小程序的App对象：
// 直接调用getApp()函数
let app = getApp()
// 可以从app中访问全局数据，可读可写
console.log(app.globalData.info)
注意：
-
App()必须在app.js中注册，且不能注册多个 - 不要在定义于
App()内的函数中调用getApp()，使用this就可以拿到 app 实例 - 不要在 onLaunch 的时候调用
getCurrentPages()，此时 page 还没有生成 - 通过
getApp()获取实例之后，不要私自调用生命周期函数
