第一节、关于选中元素后拥有指定样式的套路
核心思想：利用下标实现
wxml:
<view class="box">
<view
wx:for="{{menus}}"
wx:key="id"
class="{{index==currentIndex?'sel':''}}"
bindtap="setCurrentIndex"
mark:i="{{index}}"
>
{{item.title}}
</view>
</view>
js:
data: {
menus:[
{id:1,title:"服装"},
{id:2,title:"玩具"},
{id:3,title:"零食"},
],
currentIndex:0
},
//点击
setCurrentIndex(e){
this.setData({
currentIndex:e.mark.i
})
},
第二节、页面跳转
跳转方式
方式1：navigator组件跳转
<navigator url="" open-type="navigate/switchTab"
跳转非tabbar页面：默认不写，或者navigate
跳转tabbar页面：switchTab
方式2：js跳转
1 wx.switchTab(Object object) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
2 wx.reLaunch(Object object) 关闭所有页面，打开到应用内的某个页面
3 wx.redirectTo(Object object) 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
4 wx.navigateTo(Object object)保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 (用的最多)
传递参数
传参：
<navigator url="/pages/test/test?id={{id}}&name={{name}}">跳转test</navigator>
wx.navigateTo({
url:`/pages/test/test?id=${this.data.id}&name=${this.data.name}`
})
接受参数：
onLoad(options) {
console.log(options);
},
动态设置导航拦的标题
语法：wx.setNavigationBarTitle
data: {
title:""
},
onLoad(options) {
this.setData({
title:options.name
})
},
onReady() {
wx.setNavigationBarTitle({
title:this.data.title
})
},
第三节、左右联动效果
1 小程序等待异步渲染后才触发的方式（类似于vue中的this.$nextTick()）
this.setData({属性赋值},()=>{
//写在这里
})
2 代码控制scroll-view的距顶：
scroll-top
3 手动控制scroll-view监听距顶高度
bindscroll
4 scroll-view 开启滚动动画
scroll-with-animation
5 计算每一块元素的距顶高度
wx.createSelectorQuery().selectAll(".r").boundingClientRect(res=>{
}).exec()
第四节、小程序上传
语法：
wx.chooseMedia({...})选择图片
wx.uploadFile({})上传
wxml:
<button bindtap="choose">选择</button>
{{src}}
<image src="{{src}}" mode=""/>
<button bindtap="upload">上传</button>
js
choose(){
wx.chooseMedia({
count:1,
mediaType:['image'],
success:res=>{
console.log(res.tempFiles[0].tempFilePath);
this.setData({
src:res.tempFiles[0].tempFilePath
})
},
fail(err){
console.log(err);
}
})
},
upload(){
wx.uploadFile({
url: 'http://localhost:3000/stus/upload',
filePath:this.data.src,
name:"file",
success(res){
console.log(res);
}
})
},
第五节、小程序的监听
1 监听只能用于自定义组件，页面是不支持
2 类似于vue中watch，当检测到指定数据发生改变后，则触发函数
3 分为监听基本类型和引用类型
1 监听基本类型：
位置：和data并列
observers:{
'属性,......'(属性新值){
}
}
监听单个：
observers:{
'name'(name){
console.log("更新之后的name："+name);
},
'age'(age){
console.log("更新之后的age："+age);
},
}
监听多个：
observers:{
'name,age'(name,age){
console.log("更新之后的name："+name);
console.log("更新之后的age："+age);
},
}
2 监听引用类型:(其实是监听的对象的属性改变)
2.1 指定对象的某些属性进行监听
弊端：如果对象属性比较多，则写起来很麻烦
observers:{
'对象.属性,......'(属性新值){
}
}
2.2 监听对象的所有属性
observers:{
'对象.**'(新对象){
},
}
demo:
最终在页面渲染： n1 + n2 = sum效果
要求：
data: {
n1:1,
n2:2,
sum:0
},
data: {
obj:{
n1:1,
n2:2,
sum:0
}
},
{{n1}} +{{n2}} ={{sum}}
<button bindtap="n1Add">n1++</button>
<button bindtap="n2Add">n2++</button>
{{obj.n1}} +{{obj.n2}} ={{obj.sum}}
<button bindtap="n1Add">n1++</button>
<button bindtap="n2Add">n2++</button>
并且通过监听基本类型和引用类型两种方式来做
第六节、纯数字字段
1 监听只能用于自定义组件，页面是不支持
概念：
指的就是不用于界面渲染的data字段
作用：
把data的字段设置成纯数字字段后，则小程序就会减少指的字段的监听，---》页面性能得到提升
语法：
Component({
options:{
//设置纯数字字段属性
pureDataPattern:正则
},
第七节、插槽
监听只能用于自定义组件，页面是不支持
概念：
对于不确定的内容，可以使用插槽slot来进行占位，具体的内容由父页面/组件来决定
语法：
子： <slot></slot>
父： <子标签>内容</子标签>
内容：数据、节点等
小程序分为了单插槽和多插槽：
1 单插槽(默认)
子组件只能写一个slot，多写的会无效化
2 多插槽 （需要搭配具名插槽）
需要配置才支持
Component({
options:{
//配置多插槽
multipleSlots:true
},
子：
<slot name="s1"></slot>
<slot name="s2"></slot>
父：
<page>
<view slot="s1">内容1</view>
<view slot="s2">内容2</view>
</page>
第八节、wxs
概念：
是一个小程序独有的脚本语言(业务)，可以嵌套到wxml中，实现业务
用得最多的场景：
过滤/映射 :把原始数据 通过筛选、映射的得出的新数据渲染到页面时，
一般都得搭配{{}}
wxs语言的特点
1 该语言类似于js，但是和js是两个完全不同的语言
2 也有自己数据类型，number、string、boolean、object、function、array、date、regexp
3 只支持ES5（var function），不支持ES6（let const 解构、扩展箭头函数、对象简写）
4 也遵守Commonjs规范 module.exports
5 不能和事件搭配
6 隔离性：不能调用js的函数，也不能调用小程序api
7 ios运行，wxs 比js快 2-20倍，android上差不多
两种方式：
1 内嵌。直接把脚本写在wxml中
2 外联。 新建*.wxs文件，然后在wxml中引入即可
内嵌：
语法：
wxml：
{{模块名.暴露的函数k(参数)}}
<wxs module="模块">
function 函数(参数){
return 值
}
module.exports={
k:函数
}
</wxs>
{{m1.toUpper(name)}}
{{m1.toLower(name2)}}
<wxs module="m1">
//转大写
function toUpper(str){
return str.toUpperCase()
}
//转小写
function toLower(str){
return str.toLowerCase()
}
//暴露函数
module.exports={
toUpper:toUpper,
toLower:toLower
}
</wxs>
外联:
1 新建*.wxs文件
2 编辑
//转大写
function toUpper(str){
return str.toUpperCase()
}
//转小写
function toLower(str){
return str.toLowerCase()
}
//暴露函数
module.exports={
toUpper:toUpper,
toLower:toLower
}
3 在wxml中引入
{{m1.toUpper(name)}}
{{m1.toLower(name2)}}
<wxs module="m1" src="../../utils/my.wxs"></wxs>
src 可以用相对路径、也可以以/开头.
练习：
已知data定义电话号码，:13387656772
页面渲染效果如下: 133-8765-6772
第九、全局数据
类似于vue中的vuex,可以在app.js中存储数据，这些数据将来可以用于各大页面
1 定义：app.js
App({
globalData: {
全局属性
}
})
2 使用：一般都是在某个页面中操作全局属性
位置：直接放在页面.js中的顶端即可拿到
let app=getApp()
console.log(app.globalData);
如果要更新全局属性，直接app.globalData.属性=新值,(setData()是给自身页面的数据赋值的)
第十节、登录
在小程序中，所谓的登录就是一个授权的过程
流程
1 用户主动点击登录或者弹框询问同意授权：当用户点击“是”、“登录” 我们方可调用wx.getUserProfile(),调用完成后会弹框再次询问用户是否同意授权，如果用户同意，就可以拿到用户资料(昵称、头像等)
2 通过wx.login()获取临时code（临时登录凭证）,并且通过wx.request发送ajax到开发者服务，把code提交过去，最终开发者服务器响应一个token到前端
2.5：后台会把appid、appsecret 、code 一并提交到微信服务端，经过认真返回openid等，最终生成token
3 前端拿到token之后保存到本地
4 在之后的ajax中就可以把token挂载到请求头中，让身份识别成功
demo:
Page({
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
wx.showModal({
title: '提示',
content: '授权登录',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
//获取用户资料
wx.getUserProfile({
desc:"登录",
success(res){
console.log(res.userInfo);
let userInfo=res.userInfo;
//获取code
wx.login({
success(res){
console.log(res.code);
let code=res.code
wx.request({
url: 'http://47.98.128.191:3001/users/wxLogin',
method:"post",
data:{
code,
//userInfo是给后端注册
userInfo,
appId:"wx572ced4094dbeceb",
appSecret:"b064937d92759f7eb595998035c762fb"
},
success(res){
console.log(res.data.token);
//前端本地存储
//推荐使用同步，能够避免一些bug
wx.setStorageSync('token', res.data.token)
}
})
}
});
},
fail(res){
console.log(res);
}
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
})
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
