微信小程序 学习记录
显示与隐藏
- hidden=“{{ zf }}” zf=true/false true为隐藏,false为显示
数据绑定
- 在data:{msg:0} 里定义数据 在wxml中使用 {{msg}}
列表渲染
- wx:for=“{{数组名}}” wx:for-item=“item” wx:key=“index”
- wx:for-item=“item” 代表数组中的每个值
- wx:key=“index” 代表数组中的每个下标/唯一标识
条件渲染
- wx:if=“{{条件表达式}}” 为true就显示,false就不显示
- 多条判断 wx:elif=“{{条件表达式}}”
- 如果上面两个都是false,则可以使用 wx:else
模板引用
- 一
- 建立模板
- template 起一个name值
- 在需要的地方引用
- template 设置一个is属性,值为建立模板时的name值;设置一个data属性,值为需要引用的data里的数据
- 建立模板
- 二 import方式;这种方式只能引用文件中template包裹着的内容
- 建立一个 wxml 的文件 在文件里定义 template 需要起一个name值
- 在需要的地方使用 import 的属性src 引用 在需要的地方使用 template 方式使用 ,设置一个is属性,值为建立模板时的name值;
- ps:使用这个方法可以在template中嵌套template;如果写在template外面,在引入时不会显示
三 include 这种方式只能引用文件中template不包裹的内容 - 使用方式与方法二类似
wxcc
- 响应式像素 rpx 宽为375的屏幕中 2rpx == 1px
- @import “wxss文件地址” 引入外联样式 在wxss文件中引入
- 可以在标签中使用内联样式 style
- 选择器优先级: !important > style > # > . > 标签
wxs wxs语法参考
- 内部使用
<wxs module="b">
//暴露出去
module.exports={
mag:'内部wxs'
}
</wxs>
<view>{{b.mag}}</view>
- 外部使用
创建一个 a.wxs文件
// a.wxs的内容
module.exports={
mssg='aa'
}
<wxs src="./a.wxs" module="a"></wxs>
<view>{{a.mssg}}</view>
- 变量
wxs中可以使用 var 定义变量 - 注释
wxs中单行注释 //
多行注释 /* … */ - 运算符
- 基本运算符
- 一元运算符
- 位运算符
- 比较运算符
- 等值运算符
- 赋值运算符
- 二元逻辑运算符
- 数据类型
- 判断数据类型
- typeof 例: typeof 数据
- constructor 例: 数据 . constructor
- number 数值
- string 字符串
- boolean 布尔
- object 对象
- array 数组
- function 函数
- date 日期
- regexp 正则
- 判断数据类型
- 基础类库
- Number
- Date
- Global
- console
- Math
- JSON
MINA框架
运行机制
- 启动
- 冷启动 : 用户首次打开或者被销毁后打开
- 自动销毁
- 当短时间内连续收到两次以上收到系统内存告警
- 热启动 : 用户打开过某个小程序,在一定时间内再次打开
- 冷启动 : 用户首次打开或者被销毁后打开
- 加载
生命周期
- 程序生命周期
- onLaunch
- onShow
- onHide
- onError
- 页面生命周期
- onLoad
- onShow
- onReady
- onHide
- onUnload
页面路由
事件流
- 事件捕获阶段
- 事件处理阶段
- 事件冒泡阶段
组件
- 视图容器
- view
- scroll-view
- 实现 scroll-x 滚动 ,需要给scroll-view加上 white-space: nowrap;给子类加上display:inline-block;
- scroll-y 不用
- swiper
- movable-view
- cover-view
- 基本内容
- icon
- text
- rich-text
- progress
- 表单组件
- 媒体组件
- 导航组件
更改Data中的数据
- 使用setData()
data:{name:22} //数据
this.setData({name:11}) //更改name为11
- 注意点
- 使用setData更改的数据如果超过1024kb,会警告,卡顿
- 解决方法(二维数组)
data:{sz:[[...]]} //数组
// 在wxml中遍历
// 更改数据时
let a = `sz[${this.data.sz.length}]`
this.setData({
a:this.data.sz[0] //新的数据
})
路由
- getCurrentPages() 获取页面栈,可以操作data,setData等
- 路由传参
- 在A页面跳转B页面
url="page/B/B?num=1&s=2" - 在B页面的onLoad生命周期函数接受
onLoad: function(option){ let num= option.num; let s = option.s; console.log(num,s); }
- 在A页面跳转B页面
- 注意跳转方式
本地存储
- 同步存储
- wx.setStorageSync(‘键’,'值); //设置本地存储
- wx.getStorageSync(‘键’) //获取
- wx.clearStorageSync() //清空所有
- wx.removeStorageSync(‘键’) //删除某一个
请求接口
- 必须是https规范,需要在小程序后台添加 request规范 https://域名
- 在开发时也可以关闭这个规范
自定义小程序头部
// app.json中
"window":{
"navigationStyle":"custom" , //自定义开启
"navigationBarTextStyle": "black" //最上边的状态栏的颜色
}
// index.js中
data:{wi:0,he:0},
onLoad(){
this.setData({
wi:wx.getMenuButtonBoundingClientRect().left, //获取胶囊左边的距离
he:wx.getSystemInfoSync().statusBarHeight+wx.getMenuButtonBoundingClientRect().top+wx.getMenuButtonBoundingClientRect().height //最上边的状态栏高度 胶囊距离上边的距离 胶囊的高度
})
},
//在 wxml文件中
<view style="width={{wi}}px;height:{{he}};"></view>
//在wxss中自定义样式即可
自定义tabbar
- 在app.json中
"tabBar":{
"custom":true //开启自定义tabbar
}
- 在pages同级目录创建 custom-tab-bar 组件
例:
//app.json
"tabBar": {
"custom": true,
"color": "#212121",
"selectedColor": "#d01716",
"backgroundColor": "#fefefe",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icon/ic_menu_choice_nor.png",
"selectedIconPath": "icon/ic_menu_choice_pressed.png"
},
{
"pagePath": "pages/add/add",
"text": "+",
"iconPath": "icon/1.png",
"selectedIconPath": "icon/1.png"
},
{
"pagePath": "pages/logs/logs",
"text": "我的",
"iconPath": "icon/ic_menu_me_nor.png",
"selectedIconPath": "icon/ic_menu_me_pressed.png"
}
]
},
//custom-tab-bar组件中
//index.js
data: {
selected:0, //默认选中
color: "#333", // 未选中的字体的颜色
selectedColor: "#d01716", // 选中时的字体颜色
list: [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icon/ic_menu_choice_nor.png",
"selectedIconPath": "icon/ic_menu_choice_pressed.png"
},{
"pagePath": "pages/add/add",
"iconPath": "icon/1.png",
"selectedIconPath": "icon/1.png"
},{
"pagePath": "pages/logs/logs",
"text": "我的",
"iconPath": "icon/ic_menu_me_nor.png",
"selectedIconPath": "icon/ic_menu_me_pressed.png"
}
]
},
methods: {
_tablist(e){
let index = e.currentTarget.dataset.i;
if(this.data.selected==index) return;
this.setData({selected:index})
let url = '/'+this.data.list[index].pagePath;
wx.switchTab({
url
})
}
}
//index.wxml
<view class="tab">
<view class="tab_list" wx:for="{{list}}" wx:key="index" bindtap="_tablist" data-i="{{index}}">
<block wx:if="{{item.text}}">
<image class="tab_list_image" src="../{{selected==index?item.selectedIconPath:item.iconPath}}"></image>
<view class="tab_list_title" style="color:{{selected==index?selectedColor:color}}">{{item.text}}</view>
</block>
<block wx:if="{{!item.text}}">
<view class="tab_list_image_p">
<image class="tab_list_image_po" src="../{{item.selectedIconPath}}"></image>
</view>
</block>
</view>
</view>
//index.wxss
.tab{
width: 100%;
height: 100rpx;
display: flex;
justify-content: space-around;
align-items: center;
background-color: white;
/* background: radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #ff0000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%); background-blend-mode: normal, normal, screen, overlay, normal; */
position: relative;
}
.tab_list{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.tab_list_image{
width: 50rpx;
height: 50rpx;
}
.tab_list_image_p{
position: absolute;
border-radius: 50%;
top: -40rpx;
width: 130rpx;
height: 130rpx;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.tab_list_image_po{
width: 100rpx;
height: 100rpx;
background: radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #ff0000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%); background-blend-mode: normal, normal, screen, overlay, normal;
border-radius: 50%;
}
.tab_list_title{
font-size: 29rpx;
}
// 在每个tabBar页面的js文件中需要加入,判断选中
onShow(){
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0 //根据tabBar的顺序从0开始
})
}
},
效果图
