注:具体应以官方文档为准。
(切记多查文档!!!!!)
目录
全局配置
"pages" 内写页面,"entryPagePath" 进入页面配置,“window”写头部navigation的配置,“tabBar”底部导航栏配置,navigationStyle: "custom" 自定义头部导航栏
{
"pages":[
"pages/sassTest/sassTest",
"pages/practiseDemo/practiseDemo",
"pages/scrollView/scrollView",
"pages/pickerPra/pickerPra",
"pages/picker/picker",
"pages/form/form",
"pages/login/login",
"pages/index/index",
"pages/logs/logs"
],
"entryPagePath": "pages/index/index",
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#ec9bad",
"navigationBarTitleText": "ayu的小世界",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/static/tabbar/home-default.png",
"selectedIconPath": "/static/tabbar/home-active.png"
},
{
"pagePath": "pages/login/login",
"text": "登录",
"iconPath": "/static/tabbar/face-default.png",
"selectedIconPath": "/static/tabbar/face-active.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "/static/tabbar/logs-default.png",
"selectedIconPath": "/static/tabbar/logs-active.png"
}
],
"selectedColor": "#ec9bad",
"color": "#999",
"borderStyle": "white"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
"navigationStyle": "custom"
}
wxml
包括图片滚动,默认跳转,picker使用,
srcoll-view组件【组件/视图组件】【refresher-enable实现必须开启才能使用其身上的api】
<view class="custom-navigation">
ayu的小世界
</view>
<!-- 图片滚动 -->
<swiper indicator-dots autoplay circular class="swiper">
<swiper-item>
<image src="/static/uploads/slide_1.jpg" mode=""/>
</swiper-item>
<swiper-item>
<image src="/static/uploads/slide_2.jpg" mode=""/>
</swiper-item>
<swiper-item>
<image src="/static/uploads/slide_3.jpg" mode=""/>
</swiper-item>
<swiper-item>
<image src="/static/uploads/slide_4.jpg" mode=""/>
</swiper-item>
<swiper-item>
<image src="/static/uploads/slide_5.jpg" mode=""/>
</swiper-item>
</swiper>
<view class="list">
<view class="jx active">精选</view>
<view class="sj">手机</view>
<view class="sp">食品</view>
<view class="ny">内衣</view>
</view>
<view>{{ msg }} </view>
<button bind:tap="changeData">按钮</button>
<navigator url="/pages/login/login">跳转</navigator>
<!-- 默认跳转非tabbar用open-type="switchTab" -->
<navigator open-type="switchTab" hover-class="navActive" url="/pages/login/login">跳转到登录</navigator>
<navigator url="" open-type="switchTab" hover-class="none"></navigator>
<!-- 图片使用,mode 为图片的显示大小,用aspectFill 最好 -->
<image src="/static/uploads/goods_2.jpg" mode="scaleToFill" />
<image src="/static/uploads/goods_2.jpg" mode="aspectFit"/>
<image src="/static/uploads/goods_2.jpg" mode="aspectFill"/>
<!-- 密码输入框 -->
<view class="inputPwd">
<input type="password" type="text" placeholder="请输入密码"/>
</view>
<!-- 单选框 -->
<radio-group bindchange="">
<radio value="true"/>lili
<radio value="false" checked />erere
</radio-group>
<!-- 复选框 -->
<checkbox-group bindchange="">
<checkbox value="li"/> ll
<checkbox value="jsy"/> jsy
<checkbox value="pl"/> pl
</checkbox-group>
<!-- 日期 -->
<picker mode="date">
</picker>
<!-- 地区 -->
<picker mode="region">
</picker>
<!-- 时间 -->
<picker mode="time">
</picker>
<!-- 块区滚动 -->
<scroll-view class="aside" scroll-y
refresher-enabled
refresher-triggered="{{isLoading}}" bindrefresherrefresh="refresh">
</scroll-view>
在请求发回之后,设置isLoading: false
Page({
/**
* 页面的初始数据
*/
data: {
isLoading: false
},
refresh(){
setTimeout(()=>{
this.setData({
isLoading: false
})
console.log(1111);
},1000)
}
})
js相关
![](https://i-blog.csdnimg.cn/blog_migrate/653e084931619d327517cf67ea36c87a.png)
循环中,默认的 index item
wx:key 只能取值:item中的属性,或者 *this(简单类型用这个)
多重循环要使用
api本地存储
不记得直接查文档就行。
API特征
注意: 异步api,留意是否为Promise( promise 支持链式调用)
生命周期
多看官方文档描述,此处只是简单的记录。小程序的生命周期,分为两类。
页面生命周期
-
onLoad
在页面加载完成时执行,只会执行 1 次,常用于获取地址参数和网络请求 -
onShow
在页面处于可见状态时执行,常用于动态更新数据或状态 -
onReady
在页面初次渲染完成时执行,只会执行 1 次,常用于节点操作或动画交互等场景 -
onHide
在页面处于不见状态时执行,常用于销毁长时间运行的任务,如定时器
应用生命周期
-
onLaunch
小程序启动时执行1次,常用于获取场景值或者启动时的一些参数(如自定义分享) -
onShow
小程序前台运行时执行,常用于更新数据或状态 -
onHide
小程序后台运行时执地,常用于销毁长时间运行的任务,如定时器
页面中的钩子:
初次渲染时onLoad(一次) ------- tabBar 有缓存只执行一次,普通页面没有缓存,回退时还要执行这个
分包:
对小程序进行分包,主要是为了优化小程序首次启动速度,初衷时按需加载。
使用分包: packPackages: [] 内的 root 属性为分包的根目录与分包名, pages属性为分包包含的页面。
分包预加载:
在进入小程序之后,根据当前页面用户可能跳转的页面,进行对应的分包预加载,用来进一步提升小程序的使用体验。通过在json文件的preloadrule 中配置预加载规则,键(触发页面路径),值(规则)
对象属性名: 加载页面时预加载配置的分包
其对应的对象属性: network: 什么网络环境下预加载
packages: 预加载哪些分包
自定义组件
配置
右键创建组件,起名,在app.json/或者页面中的json中配置
在
"usingComponents": {
"navbar": "/components/navbar/navbar"
}
然后在wxml使用。
组件通讯
属性绑定:用于父传子,设置数据
使用方式:
子组件的js my-comp
Component({
properties: {
count: {
type: Number,
value: 333
}
})
// 子组件 wxml
<text> 子组件 {{ count }} </text>
父组件wxml
<my-comp count="{{count}}"></my-comp>
js
Page({
data: {
count: 12
}
})
事件绑定:用于子传父,传任意数据
子组件的js my-comp
Component({
properties: {
count: {
type: Number,
value: 333
},
}
methods: {
addCount(){
this.setData({
count : this.properties.count + 1
})
// 这里改变了count ,如果要让父组件值也一起改变,需要借助 this.triggerEvent
this.triggerEvent('log', count: this.properties.count) // 前面是写在父组件的 那个 bind: log 里的log ,这个log是自定义的
}
}
)
// 子组件 wxml
<text > 子组件 {{ count }} </text>
<button bindtap = "addCount"> 按钮 </button>
父组件wxml
<my-comp count="{{count}}" bind:log="logWords"></my-comp>
js
Page({
data: {
count: 12
},
logWords(e){
console.log(e.detail.count) // 在这里可以拿到到子组件传过来的值
this.setData({
count: e.detail.count
})
}
})
获取组件实例
??(以后补充)
组件样式
在该组件的js页面加配置
Component({
options: {
addGlobalClass: true,
},
// 开发自定义的样式类
externalClasses: ['custom-class', 'title-class']
})
组件代码:
<view class="navigation-bar custom-class">
<view class="navigation-bar-title title-class">
自定义标题
</view>
</view>
引用组件的代码:
<navigation-bar
custom-class="my-navigation-bar"
title-class="my-navigation-bar-title"
></navigation-bar>
slot插槽
和vue类似,但是多个插槽要在组件js上配置。
name
为不同的 <slot />
命名来区分不同的插槽。
options: { multipleSlots: true }
代码:
组件内代码
<view>
<view class="slotStyle">
<slot name="first"></slot>
</view>
<view class="secondSlot">
<slot name="second"></slot>
</view>
</view>
<xiaosi>
<view slot="first">
<text>第一次啦啦啦啦</text>
</view>
<view slot="second">
<text>111111</text>
</view>
</xiaosi>
__wxConfig
(文档上已经找不到了,虽然还可使用,但我怀疑之后会弃用!!所以,谨慎使用)
获取微信全局的配置(app.json)
控制台打印:
应用:可以用来获取 tabBar 页面,知晓页面是tabBar还是非tabBar.
wx.redirectTo 只能跳转普通页面,不能跳转tabBar页面
wx.switchTab 只能跳转tabBar页面,不能跳转普通页面
// 返回一个只有path 的数组
const list = __wxConfig.tabBar.list.map(v => v.pagePath.slice(0,-5))
// _redirectURL内为要跳转的路径,当该路径判断为tabBar
if(list.includes(this.data._redirectURL)){
wx.switchTab({url: '/'+ this.data._redirectURL})
}else{
wx.redirectTo({url: '/'+ this.data._redirectURL})
}
纯数据
setData 应只用来进行渲染相关的数据更新。用 setData 的方式更新渲染无关的字段,会触发额外的渲染流程,或者增加传输的数据量,影响渲染耗时。页面或组件渲染间接相关的数据可以设置为「纯数据字段」,可以使用 setData 设置并使用 observers 监听变化;
纯数据字段不会被应用到 WXML 上
使用:
page({
options: {
pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
},
data: {
_b: '', // 这就是纯数据字段
}
})
setData
这是在微信小程序中特别重要的一个修改数据的方法。
记住几句话:
- 如果Page对象的data中没有定义该key,则setData自动创建;如有则修改data中原变量的值。
- key可以以数据路径的形式给出
- key值可以为变量,为变量的时候要用[ ]引起来
上面均引用自下面链接内文章,有兴趣大家可以去看看。
其他注意事项:微信小程序:setData方法详解和注意事项-腾讯云开发者社区-腾讯云
微信小程序常用功能:
表单校验
由于微信小程序并没有提供像vue2,vue3那样方便的 validate() 之类的API,所以,我们会在这里用到一个npm包。
npm i wechat-validate
包下有具体使用方法,记得下载完包之后,还需要构建一下。
下完之后可以,就可以像vue中一样,使用表单校验功能了。