目录
1、input标签
一、表单绑定
1、数据绑定
2、输入获取
二、网络请求
1、介绍
2、注意
3、使用
4、基于Promise封装
三、自定义组件
1、创建
2、父向子组件通信
3、子向父组件通信
4、生命周期
四、vant weapp组件库
1、配置
2、使用
进入本章前的拓展：
1、input标签
小程序的input标签新增了可以改变placeholder样式的属性
<view class="about-page"><input type="text" placeholder="请输入账号" placeholder-style="color:red" placeholder-class=""/>
</view>.about-page{padding: 20rpx;
}
input{border: 2rpx solid #ccc;
}
一、表单绑定
1、数据绑定
（1）格式：value="{{变量}}"
（2）区别：小程序与vue的数据绑定
①小程序使用【mustache语法】绑定表单标签的value，数据流向【变量=》标签】
②vue是v-model双向数据绑定方式，数据流向【变量=》标签】及【标签=》变量】
（3）使用：
about.wxml
<view class="about-page"><input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{account}}"/>
</view>about.js
data: {account:'默认',
},
（4）注意：
小程序value的属性值绑定要加插值符号{{}}
2、输入获取
（1）格式：bindinput="事件"
（2）使用：
about.wxml
<view class="about-page"><input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{account}}" bindinput="onValue"/>
</view>about.js
data: {account:'默认',
},
onValue(e){console.log(e.detail.value);
},
（3）注意：
①直接赋值，虽然可以在终端实时输出改变数据，但是无法将实时数据显示到页面上
about.wxml
<view class="about-page"><input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{account}}" bindinput="onValue"/>输入框当前值：{{account}}
</view>about.js
data: {account:'默认',
},
onValue(e){console.log(e.detail.value);this.data.account = e.detail.valueconsole.log(this.data.account);
},
②小程序正确修改数据要放在this.setData({})中
onValue(e){console.log(e.detail.value);this.setData({account:e.detail.value})console.log(this.data.account);
},
（4）数据在对象内时
<view class="about-page"><input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{userInfo.username}}" bindinput="onValue"/>输入框当前值：{{userInfo.username}}
</view>data: {userInfo:{username:'',password:''}
},
onValue(e){this.setData({['userInfo.username']:e.detail.value})
},（5）通用绑定封装
about.wxml
<view class="about-page"><input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{userInfo.username}}" bindinput="getValueInput" data-target="userInfo" data-key="username"/>当前账号：{{userInfo.username}}<input type="text" placeholder="请输入密码" placeholder-style="color:red" value="{{userInfo.password}}" bindinput="getValueInput" data-target="userInfo" data-key="password"/>当前密码：{{userInfo.password}}
</view>about.js
data: {account:'默认',userInfo:{username:'',password:''}
},
getValueInput(e){console.log(e);// 解构赋值const {target,key} = e.currentTarget.datasetthis.setData({[`${target}.${key}`]:e.detail.value})
},二、网络请求
1、介绍
小程序通过 wx.request 函数发送请求
2、注意
若在开发过程中，请求域名非https协议，请在 右上角=>详情=>本地设置=>勾选【不校验合法域名】，否则将无法发送请求
3、使用
小编使用天行数据API为例子
天行数据TianAPI - 开发者API数据平台天行数据TianAPI开发者API数据平台天聚数行，在这里您可以免费且轻松的调用各种API数据接口用于系统软件、应用App、网站、小程序开发等。https://www.tianapi.com/（1）默认GET获取方式
①about.wxml
<view class="about-page"><button bindtap="getRequestApi">获取数据api</button>
</view>②about.js
getRequestApi(){wx.request({url: 'https://apis.tianapi.com/tiangou/index',method:'GET',data: { key:"a3828b7efb833ce8c26d05f10ed40e04" },// header: { /* 请求头 */ },success: res=>{/* 响应的回调 */console.log(res.data);},fail: err=>{/* 失败的回调 */}
})
},
（2）默认POST获取方式
about.js
getRequestApi(){wx.request({url: 'https://apis.tianapi.com/tiangou/index',method:'POST',data: { key:"a3828b7efb833ce8c26d05f10ed40e04" },header: { 'content-type':'application/x-www-form-urlencoded' },success: res=>{/* 响应的回调 */console.log(res.data);},fail: err=>{/* 失败的回调 */}
})
},4、基于Promise封装
（1）在utils文件夹下新建request.js文件
// 导出一个方法
export default function (option) {// 设置、获取配置项const BASE_URL = ""// 解构赋值let { url = "", method = "GET", data = {}, header = {}, isToken = true/*默认为需要*/ } = option/* 请求拦截区域 */if (isToken) {// 根据接口token需求，对header添加Authorization属性header = {...header, // 扩展运算，保留原header信息Authorization: wx.getStorageSync('token') // 加入token}}return new Promise((resolve, reject) => {wx.request({url: BASE_URL + url,method,data,header,success(res) {/* 响应拦截 */resolve(res.data) // 拆包，返回后端数据},fail(err) {reject(err)}})})
}（2）创建api文件夹=》创建aboutApi.js=》
import instance from '../utils/request'export function getMsg(data){return new instance({url:'/tiangou/index',method:"GET",data})
}export function postMsg(data){return new instance({url:'/tiangou/index',method:"POSt",data,header:{'content-type':'application/x-www-form-urlencoded'}})
}（3）回到about.js文件
//引入api文件
import {getMsg,postMsg} from "../../api/aboutApi.js"getRequestApi(){// getMsg({key:'a3828b7efb833ce8c26d05f10ed40e04'}).then(res=>{// console.log(res);// })postMsg({key:'a3828b7efb833ce8c26d05f10ed40e04'}).then(res=>{console.log(res);})
},三、自定义组件
1、创建
（1）创建component文件夹=》创建dialog文件夹=》创建Component组件index文件
2、父向子组件通信
（1）子级index.js文件设置properties，类似vue2中的父子组件传参使用方法props
properties: {title:{type:String,value:'默认',}},（2）父级about.json文件注册组件"dialog-tag":"/component/dialog/index"
{"component": true,"usingComponents": {"dialog-tag":"/component/dialog/index"}
}（3）使用组件，在父级about.wxml文件编写，使其显示到页面上
<dialog-tag title='123'></dialog-tag>
3、子向父组件通信
（1）子级index.wxml文件设置点击事件的按钮
<view class="about-page"><dialog-tag title='123'></dialog-tag><button bindtap="onclick">点击</button>
</view>（2）子级index.js设置要传递的参数及点击事件
data: {msg:'给父级的变量',},methods: {onclick(){this.triggerEvent("myevent",this.data.msg)}}（3）父级about.wxml添加连接事件
<view class="about-page"><dialog-tag title='' bindmyevent="sonClick"></dialog-tag>
</view>（4）父级about.js点击事件获取子级内容
sonClick(e){console.log(e);
},
4、生命周期
（1）基本生命周期输出顺序
/*** 生命周期函数--监听页面加载* 页面第一次加载*/onLoad(options) {console.log(1);},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log(2);},/*** 生命周期函数--监听页面显示*/onShow() {console.log(3);},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log(4);},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log(5);},
（2）更多详细生命周期看文档
组件生命周期 | 微信开放文档
四、vant weapp组件库
1、配置
（1）新建终端=》npm init=》一直回车即可
（2）下载
npm install --production（3）下载vant
①文档：Vant Weapp - 轻量、可靠的小程序 UI 组件库
②输入下载语句
npm i @vant/weapp -S --production
（4）去除默认样式，修改默认值配置项
①将 app.json 中的 "style": "v2" 去除
②修改project.config.json，查询packNpmManually属性后修改为true
③修改project.config.json，查询packNpmRelationList添加
{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"
}
（5）构建npm
①点击工具=》构建npm=》出现如下图，即构建成功
②如果构建失败可以看这个文章的解决办法
小程序npm构建时发生错误Error: C:\Users\13914\WeChatProjects\miniprogram-2\miniprogram\ 未找到_沈思齐的博客-CSDN博客
2、使用
（1）全局app.json中导入以下代码
"usingComponents": {"van-button": "@vant/weapp/button/index"
},（2）当每个页面需要使用弹出层时，就在对应页面的json文件中引入对应内容
"usingComponents": {"van-popup": "@vant/weapp/popup/index"
}<van-cell title="展示弹出层" is-link bind:click="showPopup" />123s
<van-popupshow="{{ show }}"position="top"custom-style="height: 20%;"bind:close="onClose"
/>data: {show: true,
},
showPopup() {this.setData({ show: true });
},
onClose() {this.setData({ show: false });
},
