网站 改版,儿童网站源码,用户个人中心页面html源码,wordpress打开wordpress目录
1、input标签 一、表单绑定
1、数据绑定
2、输入获取
二、网络请求
1、介绍
2、注意
3、使用
4、基于Promise封装
三、自定义组件
1、创建
2、父向子组件通信
3、子向父组件通信 4、生命周期
四、vant weapp组件库
1、配置
2、使用 进入本章前的拓展#…目录
1、input标签 一、表单绑定
1、数据绑定
2、输入获取
二、网络请求
1、介绍
2、注意
3、使用
4、基于Promise封装
三、自定义组件
1、创建
2、父向子组件通信
3、子向父组件通信 4、生命周期
四、vant weapp组件库
1、配置
2、使用 进入本章前的拓展
1、input标签
小程序的input标签新增了可以改变placeholder样式的属性
view classabout-pageinput typetext placeholder请输入账号 placeholder-stylecolor: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 classabout-pageinput typetext placeholder请输入账号 placeholder-stylecolor:red value{{account}}/
/view
about.js
data: {account:默认,
}, 4注意
小程序value的属性值绑定要加插值符号{{}} 2、输入获取
1格式bindinput事件
2使用
about.wxml
view classabout-pageinput typetext placeholder请输入账号 placeholder-stylecolor:red value{{account}} bindinputonValue/
/view
about.js
data: {account:默认,
},
onValue(e){console.log(e.detail.value);
}, 3注意
①直接赋值虽然可以在终端实时输出改变数据但是无法将实时数据显示到页面上
about.wxml
view classabout-pageinput typetext placeholder请输入账号 placeholder-stylecolor:red value{{account}} bindinputonValue/输入框当前值{{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 classabout-pageinput typetext placeholder请输入账号 placeholder-stylecolor:red value{{userInfo.username}} bindinputonValue/输入框当前值{{userInfo.username}}
/view
data: {userInfo:{username:,password:}
},
onValue(e){this.setData({[userInfo.username]:e.detail.value})
},
5通用绑定封装
about.wxml
view classabout-pageinput typetext placeholder请输入账号 placeholder-stylecolor:red value{{userInfo.username}} bindinputgetValueInput data-targetuserInfo data-keyusername/当前账号{{userInfo.username}}input typetext placeholder请输入密码 placeholder-stylecolor:red value{{userInfo.password}} bindinputgetValueInput data-targetuserInfo data-keypassword/当前密码{{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 classabout-pagebutton bindtapgetRequestApi获取数据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/requestexport 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 title123/dialog-tag 3、子向父组件通信
1子级index.wxml文件设置点击事件的按钮
view classabout-pagedialog-tag title123/dialog-tagbutton bindtaponclick点击/button
/view
2子级index.js设置要传递的参数及点击事件
data: {msg:给父级的变量,},methods: {onclick(){this.triggerEvent(myevent,this.data.msg)}}
3父级about.wxml添加连接事件
view classabout-pagedialog-tag title bindmyeventsonClick/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:clickshowPopup /123s
van-popupshow{{ show }}positiontopcustom-styleheight: 20%;bind:closeonClose
/
data: {show: true,
},
showPopup() {this.setData({ show: true });
},
onClose() {this.setData({ show: false });
},
