# 微信小程序的入门及简单的使用
## 1. 介绍
微信小程序是一种不需要下载安装即可使用的[应用]，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
### 1.1 优势
1. 方便快捷，即用即走。
不需要再下载什么APP啦，既费流量，又占空间内存。小程序就是方便，即用即走。
2. 速度快、不占内存。
因为小程序前端代码都是存在微信服务器上的，在腾讯云端存放呢，所以无需加载，直接就打开了，速度也比较快。并且还不占用手机内存。
3. 安全稳定、保密性强。
其实小程序就类似苹果商店，首先需要审核才能发布。其次小程序通信采用的是https访问，SSL加密通信，并且小程序样式代码都封装在微信小程序里面，所以安全性更高，更稳定。
4. 功能丰富，场景丰富。
可以调用比H5更多的手机系统功能来进行开发，例如GPS定位、录音、拍视频、重力感应等，能开发更丰富的使用场景。
5. 开发成本低、维护简便。
同样的功能，做一个APP估计需要十几万甚至几十万，而开发一个小程序，一般几千元就搞定了。维护起来也比较简单方便。
6. 附近定位、入口众多
开放的入口比较多，除了通过扫码，发送朋友，搜索，附近等常用入口外，还能与公众号关联，群发文章嵌入，公众号菜单链接等。
## 2. 使用
### 2.1 小程序基本概念
#### 2.1.1 开发工具
为了配合小程序开发，微信专门配备了自己的开发工具，下载微信web开发者工具，建议选择较高版本下载。
### 2.2 创建项目应用
选择小程序项目。
小程序发布需要企业级的认证公众号，所以个人订阅号是不能发布的。所以选择无AppID。
创建项目选择一个本地空文件夹，勾选并选择建立普通快速启动模版生成一个demo。
### 2.3 框架
#### 2.3.1 构成
demo初始化并包含了一些简单的代码文件，其中app.js、app.json、app.wxss 这三个是必不可少的，小程序会读取这些文件初始化实例。
app.js：小程序的初始化脚本，可以在这个文件中监听小程序的生命周期，申请全局变量和调用API等。
app.json：小程序的全局配置，**pages设置页面路径组成（默认第一条为首页），window设置默认页面的窗口表现等**。
app.wxss：小程序的公共样式表，类似前端开发中的common.css。
在pages目录下，由一个文件夹中的四个同名不同类型文件组成。
程序中的wxml摒弃了HTML标签， 改用view（类似div）、text（类似span）、icon等等，class同html指定样式，bindtap绑定事件（类似onclick），该页面无特殊配置，json文件内容为空（非必须文件）。
js：脚本文件。
json：配置文件。
wxss：样式表文件，类似前端css。
wxml：页面结构文件，类似前端html。
其中json和wxss文件为非必须（**默认会继承app的json和wxss默认设置**）。
#### 2.3.2 配置
app.json主要分为五个部分。
pages：页面组。
window：框架样式（状态栏、导航条、标题、窗口背景色）。
tabBar：底部菜单。
networkTimeout：网络超时设置。
debug：开启debug模式。
```
//app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"white"
}
}
```#### 2.3.3 逻辑
使用App()来注册一个小程序，必须在`app.js`中注册，且不能注册多个。
```
App({//如下为小程序的生命周期
onLaunch: function() { },//监听初始化
onShow: function() { },//监听显示（进入前台）
onHide: function() { },//监听隐藏（进入后台：按home离开微信）
onError: function(msg) { },//监听错误
//如下为自定义的全局方法和全局变量
globalFun:function(){},
globalData: 'I am global data'
})
```使用Page()注册一个页面，在每个页面的js文件中注册。
```
Page({
data: {text: "This is page data."},//页面数据，用来维护视图，json格式
onLoad: function(options) { },//监听加载
onReady: function() { },//监听初次渲染完成
onShow: function() { },//监听显示
onHide: function() { },//监听隐藏
onUnload: function() { },//监听卸载
onPullDownRefresh: function() { },//监听下拉
onReachBottom: function() { },//监听上拉触底
onShareAppMessage: function () { },//监听右上角分享
//如下为自定义的事件处理函数（视图中绑定的）
viewTap: function() {//setData设置data值，同时将更新视图
this.setData({text: 'Set some data for updating view.'})
}
})
```#### 2.3.4 视图与事件绑定
在每个页面中的wxml文件中，对页面js中data进行数据绑定，以及自定义事件绑定。
```
<!--{{}}绑定data中的指定数据并渲染到视图-->
<view class="title">{{text}}</view>
<!--wx:for获取数组数据进行循环渲染，item为数组的每项-->
<view wx:for="{{array}}"> {{item}} </view>
<!--wx:if条件渲染-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
<!--模板-->
<template name="staffName">
<view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>
<template is="staffName" data="{{...template.staffA}}"></template>
<template is="staffName" data="{{...template.staffB}}"></template>
<!--bindtap指定tap事件处理函数为ViewTap-->
<view bindtap="ViewTap"> 点我点我 </view>
```
```
Page({
data: {//data数据主要用于视图绑定
text:"我是一条测试",
array:[0,1,2,3,4],
view:"APP",
template:{
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'}
}
},
ViewTap:function(){console.log('额，点到我了了~')}//自定义事件，主要用于事件绑定
})
```#### 2.3.5 样式
在每个页面中的wxss文件中，对wxml中的结构进行样式设置，等同于css，扩展了rpx单位。其中app.wxss默认为全局样式，作用所有页面。
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
| 设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
| -------- | ------------------------ | ------------------------ |
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx |
微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx。
css选择器
| 选择器 | 样例 | 样例描述 |
| ---------------- | ------------- | ---------------------------------------------- |
| .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 组件前边插入内容 |
#### 2.3.6 调用后台接口
```
wx.request({
url: '...' // 接口地址
data: {
x: '',
y: ''
},
success: function(res) {
console.log(res) // 成功回调
},
fail: function(res) {
console.log(res) // 失败回调
},
complete: function(res) {
}
})
```
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------------- | ---- | ------------------------------------------------------------ |
| url | String | 是 | 开发者服务器接口地址 |
| data | Object、String | 否 | 请求的参数 |
| header | Object | 否 | 设置请求的 header , header 中不能设置 Referer |
| method | String | 否 | 默认为 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT |
| dataType | String | 否 | 默认为 json。如果设置了 dataType 为 json，则会尝试对响应的数据做一次 JSON.parse |
| success | Function | 否 | 收到开发者服务成功返回的回调函数，res = {data: '开发者服务器返回的内容'} |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |## 3. 链接
简易教程：https://developers.weixin.qq.com/miniprogram/dev/framework/
框架：https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html
组件：https://developers.weixin.qq.com/miniprogram/dev/component/
api：https://developers.weixin.qq.com/miniprogram/dev/api/
工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
