微信小程序开发第三课 - ToB企服应用市场:ToB评测及商务社交产业平台

# 1 在页面 xx.js 的 Page() 方法的 data 对象中进行声明定义
# 2 在xx.wxml 中使用 {{}} 包裹，显示数据
# 3 可以显示如下，不能编写js语句或js方法
-变量
-算数运算
-三元运算
-逻辑判断
# 4 只是单纯通过赋值，js中变量会变化，但是wxml中的页面不会变化，没有联动效果，需要使用setData()方法修改
- 更新数据
- 页面更新
# 5 setData案例修改数字
## 5.1 wxml
<view>
<view>姓名是：{{name}}</view>
<view>年龄是：{{age}}</view>
<button bind:tap="handleAddAge" plain="true" type="primary" size="mini">点击增加年龄</button>
</view>
##5.2 js
handleAddAge(){
//this.data.age++
console.log(this.data.age)
this.setData({
age:this.data.age+1
})
},
# 6 setData案例修改对象
## 6.1 wxml<view>
<view>姓名是：{{userinfo.name}}</view>
<view>年龄是：{{userinfo.age}}</view>
<view>爱好是：{{userinfo.hobby}}</view>
<button bind:tap="handleChangeName" plain="true" type="primary" size="mini">点击修改对象-姓名</button>
</view>
## 6.2 js
data: {
name: 'justin',
age: 19,
userinfo: {
name: 'lqz',
age: 99
}
},
handleChangeName() {
// 增加数据
this.setData({
'userinfo.hobby': '篮球'
})
// 修改数据
this.setData({
'userinfo.name': '彭于晏'
})
// 修改多个数据--》简便方案--》展开运算符
// const userinfo = {
// ...this.data.userinfo,
// name: '新名字',
// hobby: '乒乓球'
// }
// this.setData({
// // userinfo:userinfo
// userinfo //简写形式
// })
// 修改多个数据--》简便方案-->assign
const userinfo = Object.assign(this.data.userinfo, {
name: 'xxzz',
hobby: '烫头'
})
this.setData({
// userinfo:userinfo
userinfo //简写形式
})
//删除数据-->单个
delete this.data.userinfo.name // 页面删除不了，需要用setData更新
this.setData({
userinfo:this.data.userinfo
})
//删除数据-->多个--解构赋值
const {name,age,...res}=this.data.userinfo
this.setData({
userinfo:res
})
},
# 7 setData 修改数组
## 7.1 js
data: {
names:['刘亦菲','迪丽热巴','古力娜扎','马尔扎哈']
},
handleChangeList(){
//1 增加数组
// 1.1 增加再设置值
this.data.names.push('亚瑟王')
this.setData({
names:this.data.names
})
// 1.2 通过数组拼接
// const newList=this.data.names.concat("甄姬")
// this.setData({
// names:newList
// })
// 1.3 通过解构赋值
const newList=[...this.data.names,"李白"]
this.setData({
names:newList
})
// 2 修改数组
this.setData({
'names[1]':'justin'
})
// 3 删除数组
this.data.names.slice(1)
this.setData({
names:this.data.names.slice(1)
})
},
## 7.2 wxml
<view wx:for="{{names}}" wx:key="index">
{{item}}
</view>
<button bind:tap="handleChangeList" plain="true" type="primary" size="mini">修改数组</button>
# 8 双向数据绑定：input checkbox
<view>
<input type="text" model:value='{{name}}' style="border:orange solid 1rpx"/>
<checkbox model:checked="{{isCheck}}"/>
<text>{{isCheck}}</text>
</view>

复制代码

# 1 基本使用
## 1.1 js
data: {
goodsList:[{id:1001,name:'钢笔',price:9},{id:1002,name:'铅笔',price:6},{id:1003,name:'脸盆',price:99}]
},
##1.2 wxml
<view>
<view wx:for="{{goodsList}}" wx:key="*this">
</view>
</view>
# 2 修改wx:for-index wx:for-item
<view>
<view wx:for="{{goodsList}}" wx:key="*this" wx:for-item="info">
<text>商品id:{{info.id}}--商品名字:{{info.name}}--商品价格:{{info.price}}</text>
</view>
</view>
# 3 block
<block>商品id:{{info.id}}--商品名字:{{info.name}}--商品价格:{{info.price}}</block>

复制代码

# 1 wx:if wx:elif wx:else
<view>
<input type="text" model:value='{{score}}' style="border:orange solid 1rpx"/>
<view wx:if="{{score>=90&&score<=100}}">优秀</view>
<view wx:if="{{score>=80&&score<90}}">良好</view>
<view wx:if="{{score>=60&&score<80}}">及格</view>
<view wx:else="{{score>=90&&score<=100}}">不及格</view>
</view>
# 2 wx:if 和 hidden
## 2.1 js
showPhoto:true,
showPhotoHidden:true
handleShowPhoto(){
this.setData({
showPhoto:!this.data.showPhoto
})
console.log(this.data.showPhoto)
},
handleShowPhotoHidden(){
this.setData({
showPhotoHidden:!this.data.showPhotoHidden
})
},
## 2.2 wxml
<view>
<image src="/images/b.jpg" mode="widthFix" wx:if="{{showPhoto}}"/>
<button bind:tap="handleShowPhoto" plain="true" type="primary" size="mini">显示隐藏图片(if)</button>
<view></view>
<image src="/images/b.jpg" mode="widthFix" hidden="{{showPhotoHidden}}"/>
<button bind:tap="handleShowPhotoHidden" plain="true" type="primary" size="mini">显示隐藏图片(hidden)</button>
</view>

复制代码

# 1 发送网络请求的域名，必须在微信公众平台配置
-本地环境去除，只适用于开发版和体验版
# 2 发送请求
handleLoadData(){
wx.showLoading({
title: '加载中，稍后',
mask:true // 显示透明蒙层
})
wx.request({
url: 'http://192.168.71.100:5000',
method:'GET',
data:{},
header:{},
success:(res)=>{
wx.hideLoading()
console.log(res.data)
this.setData({
userinfo:res.data,
})
console.log(this.data.name)
},
fail:(err)=>{},
complete:(res)=>{}
})
},

复制代码

# 显示
wx.showLoading({
title: '加载中，稍后',
mask:true // 显示透明蒙层
})
#关闭
wx.hideLoading()

复制代码

##### wxml
<button type="default" size="mini" bind:tap="showModel">弹出模态框</button>
### js ###
showModel(){
wx.showModal({
title: '这是标题',
content: '这是内容部分~~',
complete: (res) => {
if (res.cancel) {
console.log('用户取消了')
}
if (res.confirm) {
console.log('用户确认了')
}
}
})
}

复制代码

#### wxml
<button type="default" size="mini" bind:tap="showToast">弹出消息框</button>
### js
showToast(){
wx.showToast({
title: '恭喜您，秒杀成功',
icon:"success",
duration:2000
})
}

复制代码

#### wxml####
<button type="default" plain bind:tap="handleSave">存储数据</button>
<button type="primary" plain bind:tap="handleGet">获取数据</button>
<button type="default" plain bind:tap="handleDelete">删除数据</button>
<button type="primary" plain bind:tap="handleClear">清空数据</button>
###js### 同步####
handleSave() {
wx.setStorageSync('name', "justin")
wx.setStorageSync('userinfo', {name:'lqz',age:19})
},
handleGet() {
const name=wx.getStorageSync('name')
const userinfo=wx.getStorageSync('userinfo')
console.log(name)
console.log(userinfo)
},
handleDelete() {
wx.removeStorageSync('name')
},
handleClear() {
wx.clearStorageSync()
}
###js### 异步####
handleSave() {
wx.setStorage({
key:'name',
data:"justin"
})
wx.setStorage({
key:'userinfo',
data:{name:'lqz',age:19}
})
},
async handleGet() {
const name= await wx.getStorage({key:'name'})
const userinfo= await wx.getStorage({key:'userinfo'})
console.log(name)
console.log(userinfo)
},
handleDelete() {
wx.removeStorage({key:'name'})
},
handleClear() {
wx.clearStorage()
}

复制代码

### wxml####
<view wx:for="{{goods}}" wx:key="index">{{item}}</view>
### wxss###
view{
height: 400rpx;
display: flex;
justify-content: center;
align-items: center;
}
/* 奇数 */
view:nth-child(odd){
background-color: pink;
}
/* 偶数 */
view:nth-child(even){
background-color: green;
}
##### js######
// 监听上拉下载更多
onReachBottom(){
console.log('上拉了')
// 发送请求，加载数据
wx.request({
url: 'http://192.168.71.100:5000',
method:'GET',
success:(res)=>{
console.log(res)
this.setData({
goods:this.data.goods.concat(res.data)
})
}
})
}
####json####
{
"usingComponents": {},
"onReachBottomDistance": 50 # 到达底部距离
}
### 后端flask###
from flask import Flask,jsonify
import random
app=Flask(__name__)
@app.route('/',methods=['GET'])
def index():
l=[]
for i in range(3):
l.append(random.randint(0,9))
return jsonify(l)
if __name__ == '__main__':
app.run(host='0.0.0.0')

复制代码

### json####
{
"usingComponents": {},
"onReachBottomDistance": 50,
"enablePullDownRefresh": true, # 开启下拉刷新
"backgroundColor": "#efefef", #下拉刷新背景色
"backgroundTextStyle":"dark" # 下拉刷新点颜色
}
#### wxml###
<view wx:for="{{goods}}" wx:key="index">{{item}}</view>
###js###
// 下拉刷新
onPullDownRefresh(){
console.log('下拉了')
this.setData({
goods:[1,2,3]
})
// 在下拉刷新后，loading效果可能没回弹
if(this.data.goods.length==3){
wx.stopPullDownRefresh()
}
}

复制代码

##### wxml####
<scroll-view
class="scroll"
scroll-y # 运行y轴滑动
lower-threshold="100" # 距离底部还有100px时，触发事件
bindscrolltolower="handleGetData"# 事件处理函数
refresher-enabled="true" # 开启下拉刷新
refresher-default-style="black" # 下拉默认样式
refresher-background="#f0f0f0" # 下拉背景色
bindrefresherrefresh="handleReload" # 下拉触发事件
refresher-triggered="{{isRefresh}}" # 设置下拉回弹，false允许回弹，
enable-back-to-top="true" # 快速回到顶部，ios点顶部，安卓点tab
>
<view wx:for="{{goods}}" wx:key="index">{{item}}</view>
</scroll-view>
### json###
{
"usingComponents": {}
}
###wxss###
.scroll{
/* 100vh就是指元素的高度等于当前浏览器的视窗高度,即浏览器内部的可视区域的高度大小 */
height: 100vh;
background-color: grey;
}
view{
height: 400rpx;
display: flex;
justify-content: center;
align-items: center;
}
/* 奇数 */
view:nth-child(odd){
background-color: pink;
}
/* 偶数 */
view:nth-child(even){
background-color: green;
}
#### js####
data: {
goods:[1,2,3,4],
isRefresh:false
},
handleGetData(){
console.log('上拉了')
// 发送请求，加载数据
wx.request({
url: 'http://192.168.71.100:5000',
method:'GET',
success:(res)=>{
console.log(res)
this.setData({
goods:this.data.goods.concat(res.data)
})
}
})
},
handleReload(){
console.log('下拉刷新了')
wx.showToast({
title: '下拉刷新',
})
this.setData({
goods:[1,2,3,4]
})
this.setData({
isRefresh:false
})
}

复制代码

# 1 访问小程序，微信会将小程序代码包，下载到微信本地，打开使用
# 2 当小程序更新版本后，微信会检查小程序版本有没有更新，并下载最新小程序
# 3 更新方式：启动时同步更新，启动时异步更新
### 同步更新：
-启动时同步更新：微信运行时，会定期检查最近使用的小程序是否有更新。如果有更新，下次小程序启动时会同步进行更新，更新到最新版本后再打开小程序。如果用户长时间未使用小程序时，会强制同步检查版本更新
-如果更新失败，还是会使用本地版本
-新版本发布24小时后，基本会覆盖全部用户
### 异步更新####
启动时异步更新：在启动前没有发现更新，小程序每次冷启动时，都会异步检查是否有更新版本。如果发现有新版本，将会异步下载新版本的代码包，将新版本的小程序在下一次冷启动进行使用，当前访问使用的依然是本地的旧版本代码
## 强制更新###
在启动时异步更新的情况下，如果开发者希望立刻进行版本更新，可以使用 wx.getUpdateManager API 进行处理。在有新版本时提示用户重启小程序更新新版本
# 4 在app.js中加入
App({
// 生命周期函数，启动小程序就会执行
onLaunch(){
const update=wx.getUpdateManager()
update.onUpdateReady(function(){
wx.showModal({
title: '发现新版本',
content: '重启应用，更新版本新版本?',
success:(res)=>{
if(res.confirm){
update.applyUpdate()
}
}
})
})
}
})

复制代码

// app.js
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
console.log('小程序启动了')
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {
console.log('后台切前台了')
},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
console.log('进后台了')
},
})

复制代码

Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log('1 页面加载了')
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
console.log('3 初次渲染完成')
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
console.log('2 页面显示')
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
console.log('4 页面隐藏')
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
console.log('5 页面卸载')
},
})

复制代码

// 允许发送到朋友圈，右上角 ... 分享到朋友圈
onShareTimeline(){
return {
title:"这是一个神奇的页面",
query:'name=justin&age=19',
imageUrl:'/images/b.jpg'
}
},

复制代码

# 1 方式一：通过右上方 ...
# 2 方式二：通过按钮，需要给button设置 open-type="share"
<button open-type="share">转发</button>
# 3 js中编写
onShareAppMessage() {
return {
title:"是朋友就点一下",
path:"/pages/my/my", //当前转发的页面
imageUrl:'/images/b.jpg'
}
},

复制代码