准备环境: ①注册好一个小程序的帐号
②开发者工具
了解:
一、页面创建
1.全局三个文件,分别是app.js app.json app.wxss(名称不可更改)
2.创建Pages目录文件(作用是用来放各个页面的)
3.创建页面{给页面起名字,并且创建4个文件}
(1)js:页面逻辑实现
(2)json: 负责标题栏和一些状态栏
(3)wxml: 管理页面有什么
(4)wxss: 页面排布
4.把内容单元封装在view内部,写法:"内容”
用class的方法对view内容样式进行排布
……class可以对其他组件样式布局也有效,class规定的样式前需要加上’.’,如果像image/text这样的组件的话,不需要加’.’(全局有效)
5.这节课需要用到三个组件:图片、文字、按钮
(1)图片 <image src='图片路径'></image>
(2) 文字 <text>"内容"</text>
(3) 按钮 <button >"按钮上的字"</button>
看下源代码:
index.wxxml
<view class="container">
<image src='{{src}}' class="abc"></image>
<text>{{name}}</text>
<button open-type="getUserInfo" bindgetuserinfo="getMyInfo">点击获取头像和昵称</button>
<!-- open-type="getUserInfo" 指的是激活获取微信用户信息
bindgetuserinfo="getMyInfo" 表示把获得的数据传递给自定义的函数 getUserInfo是自定义的 -->
</view>
index.js文件
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
name:'Hello World',
src:'/images/user.png'
},
getMyInfo:function(e){
console.log(e.detail.userInfo)
let info =e.detail.userInfo;
this.setData({
name:info.nickName,//更新名字
src:info.avatarUrl//更新图片来源
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
效果:
使用小程序做两三个小案例: 引用哔哩哔哩的视频
https://www.bilibili.com/video/av58012612/?spm_id_from=333.788.videocard.5
有视频介绍,建议保存下视频