微信小程序
一、wxml语法
1、数据绑定
1.1初始化数据
- 页面.js的data选项
1.2使用数据
- 模板结构中使用双大括号
{ {message}}
,类似vue中的插值表达式
- 注意事项: 小程序中为单项数据流 model —> view
<text class="username">{
{msg}}</text>
1.3修改数据
this.setData({message: ‘修改之后的数据’}, callback)
- 特点:
a) 同步修改: this.data 值被同步修改
b) 异步更新: 异步将 setData 函数用于将数据从逻辑层发送到视图层(异步)
2、事件绑定
2.1 事件分类
1) 冒泡事件
a) 定义:冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
b) 冒泡事件列表:
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
2) 非冒泡事件
a) 定义:当一个组件上的事件被触发后,该事件不会向父节点传递。
b) 非冒泡事件:表单事件和自定义事件通常是非冒泡事件
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
2.2 绑定事件
bind 绑定
:事件绑定不会阻止冒泡
事件向上冒泡
<view bindtap="handleTap" class='start_container'>
<text class='start'>开启小程序之旅</text>
</view>
catch 绑定
: 事件绑定可以阻止冒泡
事件向上冒泡
<view catchtap="handleTap" class='start_container'>
<text class='start'>开启小程序之旅</text>
</view>
2.3 向事件对象传参
- 语法: data-key=value
- 获取: event.target.dataset.key || event.currentTarget.dataset.key
- Event.target 和 event.currentTarget 的区别
a) Event.target 是触发事件的对象,但不一样是绑定事件的对象,如: 事件委托,冒泡
b) currentTarget 触发时间的对象一定是绑定事件的对象, 没有事件委托
3、列表渲染
3.1 语法说明
- wx:for=’{ {arr}}’
- wx:key=’{ {唯一值}}’
- 默认的个体: item
- 默认的下标: index
- 自定义个体变量名称: wx:for-item=’myItem’
- 自定义下标变量名称: wx:for-index=’myIndex’
4、条件渲染
4.1 语法说明
-
wx:if=’条件’
-
wx:elif=’条件’
-
wx:else
4.2 wx:if VS hidden
-
hidden 用法:
<view hidden='{ {true}}' ></view>
-
wx:if 等同于 v-if, 条件为 false 的时候不加载,条件切换的时候决定元素销毁或者
重新加载渲染 -
hidden 等同于 v-show, 始终加载元素, 条件切换的时候决定元素的显示和隐藏
5、模板使用
5.1 定义模板
5.2 引入模板
-
引入模板结构:
<import src='模板结构相对路径' />
-
引入模板样式: @Import ‘模板样式路径’
5.3 使用模板
5.4 向模板导入数据并使用数据
6、生命周期
6.1 对应阶段说明
onLoad(Object query)
a) 页面加载时触发。一个页面只会调用一次
,可以在 onLoad 的参数中获取打开
当前页面路径中的参数。
b) 参数:
名称 类型 说明
query Object 打开当前页面路径中的参数onShow()
a) 页面显示/切入前台
时触发
b) 会执行多次onReady()
a) 页面初次渲染完成
时触发。一个页面只会调用一次
,代表页面已经准备妥当,
可以和视图层进行交互。onHide()
a) 页面隐藏/切入后台
时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面,小
程序切入后台等。onUnload()
a) 页面卸载
时触发。如 wx.redirectTo 或 wx.navigateBack 到其他页面时。
- 发送请求可以在onload的时候发,或者onReady的时候发,后者比前者晚一点
- 这个页面被关闭了就会执行onUnload
- 如果路由跳转保留页面就会执行onHide
- 跳转后,点左上角返回之前的页面就会执行onShow
6.2 官网图示说明
6.3 官网对应地址
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
二、获取用户基本信息
- index.js
// pages/index/index.js
Page({
//获取用户信息
getUserInfo(resp){
if (resp.detail.userInfo){
this.setData({
userInfo: resp.detail.userInfo
})
}
},
/**
* 页面的初始数据
*/
data: {
msg:"初始化数据",
userInfo:{
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.getUserInfo({
success:(resp)=>{
this.setData({
userInfo:resp.userInfo
})
},
fail:(error)=>{
console.log(error);
}
})
}
})
- index.wxml
<view class="indexContainer">
<image src="{
{userInfo.avatarUrl}}" class="userAvatarUrl" wx:if="{
{userInfo.avatarUrl}}"></image>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo" wx:else>获取用户信息</button>
<text class="username" wx:if="{
{userInfo.nickName}}">{
{userInfo.nickName}}</text>
<view class="goStudy" catchtap="toLogs">
<text>hello world</text>
</view>
</view>
- index.wxss
/* pages/index/index.wxss */
.indexContainer {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f;
height: 100vh;
}
.userAvatarUrl {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin: 100rpx 0;
}
.username {
font-size: 32rpx;
margin: 100rpx 0;
}
.toStudy {
width: 300rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 28rpx;
border: 1rpx solid #333;
border-radius: 10rpx;
}
button {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin: 100rpx 0;
font-size: 25rpx;
line-height: 200rpx;
text-align: center;
background-color: forestgreen;
}
- 测试
未授权时
授权后
配色随便选的,哈哈很丑,测试用的
三、轮播图
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
- index.wxml
<view class="indexContainer">
<!--轮播图-->
<swiper class="banners" autoplay indicator-dots indicator-color="invory" indicator-active-color='#d43c33'>
<swiper-item>
<image src="/static/images/nvsheng.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/static/images/nvsheng.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/static/images/nvsheng.jpg"></image>
</swiper-item>
</swiper>
</view>
- index.wxss
/* pages/index/index.wxss */
.banners{
width: 100%;
height: 300rpx;
}
.banners image{
width: 100%;
height: 100%;
}
- 效果
四、五个图标导航区域
- 图标icon导入
icon提供链接:https://www.iconfont.cn/home/index
因为小程序不是css格式,是wxss格式,就将这个css在线地址打开,新建文件.wxss并赋值到里面
- index.wxml
<!--导航区域-->
<view class="navContainer">
<view class="navItem">
<text class="iconfont icon-tuijian"></text>
<text>每日推荐</text>
</view>
<view class="navItem">
<text class="iconfont icon-gedan"></text>
<text>歌单</text>
</view>
<view class="navItem">
<text class="iconfont icon-paihangbang"></text>
<text>排行榜</text>
</view>
<view class="navItem">
<text class="iconfont icon-diantai"></text>
<text>电台</text>
</view>
<view class="navItem">
<text class="iconfont icon-zhibo"></text>
<text>直播</text>
</view>
</view>
- omdex.wxss
/* 五个图标导航区域样式 */
.navContainer{
display: flex;
}
.navItem{
display: flex;
flex-direction: column;
align-items: center;
width: 20%;
}
.navItem .iconfont{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
text-align: center;
line-height: 100rpx;
background-color: rgb(240,19,19);
font-size: 50rpx;
color: #fff;
margin: 20rpx 0;
}
.navItem text{
font-size: 28rpx;
}
.recommendContainer{
padding: 20rpx;
}
.recommendContainer .header .title{
font-size: 30rpx;
line-height: 80rpx;
color: #666;
}
.recommendContainer .header .more{
float: right;
border: 1rpx solid #333;
padding: 10rpx 20rpx;
border-radius: 30rpx;
font-size: 25rpx;
text-align: center;
}
.recommendContainer .header{
padding-bottom: 20rpx;
}
- 效果
五、推荐歌曲区域静态搭建
- 微信
可滚动视图区域
文档
地址:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
- index.wxml
<!--推荐歌曲-->
<view class="recommendContainer">
<view class="header">
<text class="title">推荐歌曲</text>
<view>
<text>为你精心推荐</text>
<text class="more">查看更多</text>
</view>
</view>
<view id="demo1" class="scroll-view-item demo-text-1"></view>
<!--内容区-->
<scroll-view scroll-x class="recommendScroll" enable-flex>
<view class="scrollItem">
<image src="/static/images/nvsheng.jpg"></image>
<text>贾静雯老师</text>
</view>
<view class="scrollItem">
<image src="/static/images/nvsheng.jpg"></image>
<text>贾静雯老师</text>
</view>
<view class="scrollItem">
<image src="/static/images/nvsheng.jpg"></image>
<text>贾静雯老师</text>
</view>
<view class="scrollItem">
<image src="/static/images/nvsheng.jpg"></image>
<text>贾静雯老师</text>
</view>
<view class="scrollItem">
<image src="/static/images/nvsheng.jpg"></image>
<text>贾静雯老师</text>
</view>
<view class="scrollItem">
<image src="/static/images/nvsheng.jpg"></image>
<text>贾静雯老师</text>
</view>
<view class="scrollItem">
<image src="/static/images/nvsheng.jpg"></image>
<text>贾静雯老师</text>
</view>
</scroll-view>
</view>
- wxss
/*推荐内容区*/
.scrollItem{
width: 200rpx;
padding: 8rpx;
}
.scrollItem image{
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
}
.recommendScroll{
display: flex;
}
.scrollItem text{
font-size: 25rpx;
/*单行文本溢出隐藏 省略号代替*/
/* display: block;*/
/* white-space: nowrap;*/
/* overflow: hidden;*/
/* text-overflow: ellipsis;*/
/*多行文本溢出隐藏 省略号代替*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical; /*设置对齐模式*/
-webkit-line-clamp: 2; /*设置多行的行数*/
word-break: break-all;
- 效果
六、前后端交互
官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
- 使用Nodejs服务器,来访问网易云服务器
用cmd进入命令行
先npm install -g nodemon
再npm start
再访问:http://localhost:3000/
- index.js
onLoad: function (options) {
wx.request({
url:'http://localhost:3000/banner',
data: {
type:2},
success:(resp)=>{
console.log("请求成功:",resp);
},
fail:(error)=>{
console.log("请求失败:",error);
}
})
}
- 给微信小程序中注册我们上面配置的服务器,不然会请求不合法
但是我们这里访问的是本地服务器,不能使用https,所以我们只能通过以下方法
在微信开发者工作中
再次请求
七、封装请求功能函数库
- config.js
//配置服务器相关信息
export default {
host:'http://localhost:3000'
}
- request.js
//发送ajax请求
/*
* 1、封装功能【函数】
* 1、功能点明确
* 2、函数内部保留固定代码(静态代码)
* 3、将动态的数据抽取成形参,由使用者根据自身的情况动态的传入实参
* 4、一个良好的函数应该设置形参默认值(ES6的形参默认值)
*
* 2、封装功能【组件】
* 1、功能点明确
* 2、组件内部保留静态代码
* 3、将动态的数据抽取成props参数,由使用者根据自身的情况以标签属性的形式动态传入props数据
* 4、一个良好的组件应该设置组件的必要性及数据类型
* props:{
* msg:{
* required:true,
* default:默认值,
* type:String
* }
* }
*
* */
import config from './config'
export default (url,data={
},method='GET')=>{
return new Promise((resolve, reject)=>{
wx.request({
url:config.host+url,
data,
method,
success:(resp)=>{
// console.log("成功",resp);
resolve(resp.data);//resolve修改promise状态为成功状态
},
fail:(err)=>{
// console.log("错误:",err)
reject(err);//reject修改promise状态为失败状态
}
})
})
}
- index.js
/**
* 生命周期函数--监听页面加载
*/
onLoad: async function (options) {
// wx.request({
// url:'http://localhost:3000/banner',
// data: {type:2},
// success:(resp)=>{
// console.log("请求成功:",resp);
// },
// fail:(error)=>{
// console.log("请求失败:",error);
// }
// })
//await:等待异步成功发送
//async:异步发送请求
let result = await request('/banner',{
type:2})
console.log(result);
}
八、列表渲染
官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html
- index.js
data: {
bannerList:[],//轮播图数据
},
onLoad: async function (options) {
//await:等待异步成功发送
//async:异步发送请求
let bannerList = await request('/banner',{
type:2})
console.log(bannerList);
this.setData({
bannerList:bannerList.banners
})
}
- index.wxml
<!--轮播图-->
<swiper class="banners" autoplay indicator-dots indicator-color="invory" indicator-active-color='#D4333C'>
<swiper-item wx:for="{
{bannerList}}" wx:key="bannerId">
<image src="{
{item.pic}}"></image>
</swiper-item>
</swiper>
- 效果
九、推荐歌曲动态实现
- index.wxml
<!--推荐歌曲-->
<view class="recommendContainer">
<view class="header">
<text class="title">推荐歌曲</text>
<view>
<text>为你精心推荐</text>
<text class="more">查看更多</text>
</view>
</view>
<view id="demo1" class="scroll-view-item demo-text-1"></view>
<!--内容区-->
<scroll-view scroll-x class="recommendScroll" enable-flex>
<view class="scrollItem" wx:for="{
{recommendMusicList}}" wx:key="id">
<image src="{
{item.picUrl}}"></image>
<text>{
{item.name}}</text>
</view>
</scroll-view>
</view>
- index.js
data: {
recommendMusicList:[]//推荐歌曲内容
},
onLoad: async function (options) {
//await:等待异步成功发送
//async:异步发送请求
let recommendMusicList = await request('/personalized',{
limit:15})
this.setData({
recommendMusicList:recommendMusicList.result
})
}
- 效果