### 第一个小程序项目
下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)，新建项目（不使用云开发 JavaScript模板）
### app.json
pages：定义小程序的页面，相当于路由功能
window：配置页面属性
backgroundColor：背景颜色，主要针对下拉刷新的背景
backgroundTextStyle：下拉刷新提示符号的颜色 light | dark
navigationBarBackgroundColor：导航栏背景颜色
navigationBarTitleText：导航栏文字
navigationBarTextStyle：导航栏文字风格 black | white
tabBar： 设置页面导航
position：设置导航位置 bottom | top
color：导航文字默认颜色
selectedColor：导航文字选中颜色
list：定义导航项 2-5个
pagePath：导航对应的页面地址
iconPath：导航图标地址
selectedIconPath：选中状态图标地址
text：导航文字
### 小程序的基本语法
view => div 块级元素 text => span p 行内元素
新增rpx相对单位 1rpx 就是 屏幕宽度的 1/750
### 数据渲染
普通渲染 { { msg }} 在两对花括号内写js表达式/变量
条件渲染 wx:if wx:elif wx:else
列表渲染 wx:for wx:for-item wx:for-index
```html
<view>{ {num}}</view>
<view>{ {1+2}}</view>
<view wx:if="{ {false}}">欢迎回来</view>
<view wx:else>请登录</view>
<view wx:if="{ {fen>90}}">优秀</view>
<view wx:elif="{ {fen>80}}">不错</view>
<view wx:elif="{ {fen>70}}">良好</view>
<view wx:elif="{ {fen>=60}}">及格</view>
<view wx:else>不及格</view>
<view wx:for="{ {list}}" wx:key="{ {item}}">{ {item}}</view><!-- 注释 -->
<view wx:for="{ {list}}" wx:for-index="ind" wx:for-item="ite">{ {ind+1}}-{ {ite}}</view>
```
### 模板引入
##### template
template是一个模板标签：
```html
// 使用name定义模板的名字
<template name="tmp">
<view>这是一个模板</view>
</template>
// 使用is调用对应的模板
<template is="tmp" />
// 传递参数 在模板内容中直接使用数据
<template name="tmp">
<view>姓名：{ {name}}</view>
<view>年龄：{ {age}}</view>
</template>
// 调用模板时 使用data定义数据
<template is="tmp" data="{ {name:'张三',age:18}}"></template>
```
##### import
import 只能引入模板文件
##### include
include 引入除模板以外的其他内容
### 组件
button 按钮组件
image 图片组件 在src中定义图片路径 mode = “widthFix” 宽度固定高度自使用
swiper 滑块视图组件 用于轮播图 里面只能放swiper-item组件 [官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html)
scroll-view 可滚动视图区域 使用竖向滚动时，需要给scroll-view一个固定高度
icon 图标组件
text 文本组件
rich-text 富文本组件 nodes属性的值就是要显示的源码 （支持html/nodejs）
input 输入框组件
type类型：
| 合法值 | 说明 | 最低版本 |
| :------------ | :----------------------------------------------------------- | :------- |
| text | 文本输入键盘 | |
| number | 数字输入键盘 | |
| idcard | 身份证输入键盘 | |
| digit | 带小数点的数字键盘 | |
| safe-password | 密码安全输入键盘 [指引](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/safe-password.html) | 2.18.0 |
| nickname | 昵称输入键盘 | 2.21.2 |
### 事件
在小程序中，每个组件都有对应的事件方法
bindtap：单击事件
bindinput：输入框事件
bindchange：input改变事件
bindlongpress：长按事件
bindconfirm：确认事件（手机键盘里的确认/回车）
```javascript
// 通过 bindtap 绑定 hdClick 方法
<button type="primary" bindtap="hdClick">这是个按钮</button>
js:
hdClick(){
// 提示框
wx.showToast({
// 提示框标题
title: '单击事件被触发了单击事件被触发了单击事件被触发了',
// 提示框图标
icon:"none"
})
},
```
setStorageSync:设置本地缓存
★ 单条缓存最大容量 1Mb 总缓存容量 10Mb
getStorageSync:读取本地缓存
```
// 设置本地缓存
setStorageSync('id','123456')
// 获取本地缓存
getStorageSync('id')
```
传参：通过自定义属性的方式进行传参
```javascript
<button
// 通过data-msg 定义一个字符串
data-msg="hello 你好"
type="primary"
bindtap="hdTap"
>传递参数</button>
js:
hdTap(e){
// 通过方法中的currentTarget.dataset 获取传递过来的data属性的值
console.log(e.currentTarget.dataset.msg)
wx.showToast({
title: e.currentTarget.dataset.msg
})
},
```
##### 双向绑定
```
<input
class="ipt"
type="text"
// 将数据绑定到value
value="{ {text}}"
// 通过bindinput调用hdIpt方法
bindinput="hdIpt"
/>
<view>{ {text}}</view>
js：
hdIpt(e){
// 通过e.detail.value 获取input的value值
console.log(e.detail.value)
// 修改data中的数据 达到双向绑定的效果
this.setData({
text:e.detail.value
})
},
```
### 生命周期
onLoad：页面加载时
onReady：页面渲染时
onShow：页面显示时
onHide：页面隐藏
onUnload：页面销毁
onPullDownRefresh：下拉时
onReachBottom：上拉触底
onShareAppMessage：点击分享按钮时
### 页面跳转（路由）
标签跳转：navigator
open-type跳转类型
普通跳转
redirect 不保存历史记录跳转
navigateBack 返回上级页面
switchtab 跳转至tabbar页面
js跳转
wx.navigateTo() 普通跳转
wx.redirectTo() 销毁式跳转
wx.switchTab() 跳转tabbar页面
wx.navigateBack() 返回上级页面 | delta 返回多少级
#### 路由传参
通过在url中拼接的方式，进行query传参
在目标页面的onLoad生命周期中通过该函数的参数获取参数
### 发送网络请求
使用 wx.request()
```
wx.request({
url:请求的地址,
data:请求参数,
method:请求方法 post|get
success:请求成功的方法
fail:请求失败的方法
})
```
### 小程序中使用npm
1、在项目根目录启动命令界面
2、使用npm init -y 初始化npm项目
3、安装npm依赖包
4、在小程序中构建npm
菜单->工具->构建npm
(详情->本地设置->使用npm模块)
### 使用三方组件库
1、在项目根目录启动命令界面
2、使用npm init -y 初始化npm项目
3、安装vant组件库：npm i @vant/weapp -S --production
4、按需引入组件：
```json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
```
5、使用组件：
```html
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
```
### 下拉、触底事件
##### 下拉刷新
首先在json中配置启动允许下拉刷新：
```json
"enablePullDownRefresh": true,
```
在js中定义一个下拉钩子：
```javascript
onPullDownRefresh: function () {
//...
},
```
##### 触底事件
```json
// 定义触底距离 默认值：50
"onReachBottomDistance": 100,
```
在js中定义一个钩子：
```javascript
onReachBottom: function () {
//...
},
```
### wxParse富文本框
下载wxParse的组件包 [git地址](https://github.com/icindy/wxParse)
1、构建npm包 ： 工具->构建npm
2、把语言包 locale 复制到 miniprogram_npm/moment 修改路径
3、先引入wxparse组件
```javascript
// 引入wxparse组件
var WxParse = require('../../../wxParse/wxParse.js');
```
4、使用wxparse传入数据
```javascript
// html 转换成对应的格式
// article 组件接收的变量
// html 要转换的源码格式
// this.data.content 传入的源码
// this 当前pages对象
// 5 源码中包含的图片间距
WxParse.wxParse('article', 'html', this_.data.content, this_, 5);
```
5、使用组件
```html
<!-- 导入wxparse的模板 -->
<import src="/wxParse/wxParse.wxml"/>
<!-- 使用模板 传入wxParseData 对应的是article.nodes -->
<template is="wxParse" data="{ {wxParseData:article.nodes}}"/>
```
### 小程序的云开发
#### 云数据库
在使用云数据库的时候应先初始化数据库
```javascript
const db = wx.cloud.database()
```
增： 使用db.collection(集合名).add({ data:{数据键值对} })
```javascript
db.collection('user').add({
data:{
name:"王五",
age:498
}
})
```
删 小程序代码中无法批量删除 通过db.collection(集合名).doc(数据id).remove()
```javascript
db.collection('user')
// 通过 _id 选中一条数据
.doc('d4107ab16237e76400e0b42d77b87ab5')
// 通过remove方法删除数据
.remove()
```
改 db.collection(集合名).doc(修改数据的id).update({data:{数据键值对}})
```javascript
db.collection('user')
// 选中某一条数据
.doc('efbc6d716237e26e00d5b56660ed76f2')
// 更新方法 data定义修改的数据值
.update({
data:{
age:22
}
}
```
查 db.collection(集合名).where({键值对数据}).get()
```javascript
db.collection('user')
// 查询条件
.where({
name:"张三"
})
// get 查询方法
.get()
```
#### 云函数
###### 创建云函数
在cloudfunctions 右键 -> 新建nodejs云函数 创建云函数
在函数文件夹 右键 -> 上传并部署->控制台已部署
###### 求和函数
```javascript
// 云函数入口函数
// event 就是在调用该函数时传入的参数
// context 指上下文
exports.main = async (event, context) => {
return {
// 计算 a+b的值
sum:event.a + event.b
}
}
```
###### 使用求和函数
```javascript
wx.cloud.callFunction({
// 云函数名
name:'sum',
// 云函数参数
data:{
a:1,
b:3
}
})
```
###### 在云函数中获取用户信息
```javascript
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
event,//传入的参数
openid: wxContext.OPENID, // 获取openid
appid: wxContext.APPID, // 获取appid
unionid: wxContext.UNIONID, // 获取unionid
}
}
```
###### 批量删除云数据库
```javascript
// 初始化云环境
cloud.init()
// 初始化云数据库
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
try{
return await db.collection('user') // 选择数据集合
.where({ // 查询条件
name:'王五'
}).remove() // 使用remove删除数据
} catch(err){
console.log(err)
}
}
```
#### 云存储
###### 上传图片
wx.chooseImage 选择本地的图片 可以获取到临时图片路径
wx.cloud.uploadFile 把临时路径上传到云存储空间
```javascript
// chooseImage选择本地相册或打开相机
wx.chooseImage({
// 上传的数量 最大9
count: 1,
// 压缩类型
sizeType: ['original', 'compressed'],
// 来源
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
console.log(tempFilePaths)
// 获取文件的后缀 通过正则
// upLoad.class.php
let suffix = /\.\w+$/.exec(tempFilePaths)[0]
// 把临时路径上传到云存储
// 将文件上传至云存储空间
wx.cloud.uploadFile({
// 指定上传到的云路径
// cloudPath: 'img/my-photo.jpg',
cloudPath: new Date().getTime() + suffix,
// 指定要上传的文件的小程序临时文件路径
filePath: tempFilePaths[0],
// 成功回调
success: res => {
console.log('上传成功', res)
// 上传成功后 把图片的fileID存到数据库
db.collection('image').add({
data:{
fileID:res.fileID
}
}).then(res1=>{
console.log(res1)
}).catch(err=>{
console.log(err)
})
},
})
}
})
```
###### 显示图片
```javascript
wx.cloud.callFunction({ // 通过云函数 查找当前用户的所有数据
name:'login'
}).then(res=>{
let _openid = res.result.openid // openid 当前用户的唯一标识
db.collection('image').where({
// 根据openid查询所有数据
_openid:_openid
}).get().then(res1=>{ // 通过get方法查找数据
console.log(res1)
this.setData({
imgs:res1.data // imgs就是所有要展示的图片
})
})
})
```
###### 保存图片到手机相册
```javascript
// 通过wx.cloud.downloadFile 获取云存储中文件的临时路径
wx.cloud.downloadFile({
// fileID 要获取文件的唯一标识
fileID:e.target.dataset.file, // 具体文件的唯一标识
success:res=>{
// 获取临时路径
console.log(res.tempFilePath) // 文件的临时路径
wx.showModal({ // 显示确认弹窗
title:'保存？',
success:res3=>{
if(res3.confirm){ // 点击确认
// 保存文件到本地（手机相册）
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath, // 传入临时路径
success:res1=>{
wx.showToast({ // 成功后弹窗提醒
title: '保存成功',
icon:'none'
})
}
})
}
}
})
}
})
```