一、开发工具准备
二、 小案例
效果图：
开发步骤：
1.打开微信开发者工具，新建一个项目
2. 删掉原有的文件目录，自己根据需要重新写
3.创建需要的文件
-
app.js
-
app.json
-
app.wxss
-
右击index新建一个Page，会自动生成四个文件
4. 编写app.json文件
到这里发现样式发生了变化
5. 编写index界面
6. 编写index.wxss样式
以上就完成了一个简单的小程序的UI绘制了，下面在原来的基础上添加一下动态数据
三、小案例进阶
1. 数据绑定（index.js）
初始化数据
/** 页面的初始数据*/
data: {
msg:"初始化数据测试"
},
使用数据
<view> {
{
mag }}</view>
设置数据 this.setData()
/** 生命周期函数--监听页面加载 */
onLoad: function (options) {
// onLoad函数在页面刚加载时就 执行这个函数
console.log(this.data.msg);
// 使用 this.setData 来设置Data数据
this.setData({
msg:"修改后的数据"
});
console.log(this.data.msg);
},
2. 事件绑定
事件分类
- 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
- 非冒泡事件：表单事件和自定义事件通常是非冒泡事件。
绑定事件
- bind 绑定：事件绑定不会阻止冒泡事件向上冒泡。
- catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡.
事件的使用
index.wxml
index.js
3. 路由跳转（进行页面的跳转）
使用官方的API进行路由的跳转
index.wxml
index.js
4. 获取用户的基本信息
获取用户信息分为两种：
- 用户已授权：通过
wx.getUserInfo()来获取。 - 用户首次登录：通过button 的
open-type="getUserInfo"来获取。
1. 通过button点击获取用户信息
使用开发者文档查看 button 组件的使用：
下面是console.log(res) 打印出来的数据
2. 通过 wx.getUserInfo 来获取用户信息
onLoad: function (options) {
// onLoad函数在页面刚加载时就 执行这个函数
// wx.getuserInfo 获取用户信息
wx.getUserInfo({
success:(res)=>{
// 获取成功
this.setData({
userInfo: res.userInfo,
});
},
fail:(err)=>{
// 获取失败
console.log(err);
}
});
},
下面根据实际情况设置一下微信小程序的登录授权！
- 当用户首次登录，需要隐藏图片，显示按钮；
- 如果用户再次登录，已授权，直接显示用户信息；
要实现上面效果，需要使用 条件渲染！
当 wx:if=‘条件’ 成立，组件显示
效果：
码农云库QQ交流群：1139680855