微信小程序
文件介绍
微信小程序每个页面就是一个文件夹文件夹文件夹结构为:
index.js //页面脚本 入口
index.json //页面配置
index.wxml //页面 html
index.xxss //页面样式
配置
全局配置和局部配置 app.json/page.json
全局配置
{
"pages": [//页面配置 默认第一个页面
"pages/index/index",
"pages/news/index"
],
"window": {
"enablePullDownRefresh": true,//是否开启下拉刷星 默认false
"backgroundTextStyle": "light",//下拉刷星样式 light/dark
"backgroundColor":"#ccc",//下拉刷新背景色
"navigationBarBackgroundColor": "#fff",//导航栏背景颜色
"navigationBarTitleText": "博文",//导航栏标题
"navigationBarTextStyle": "black",//导航栏文字颜色 仅支持 white/black
},
"tabBar": { //标签页
"list": [
{
"pagePath": "pages/index/index",//点击显示的页面
"text": "首页",//图标文字
"iconPath": "./static/tabicon/default/shouye.png",//默认图标
"selectedIconPath": "./static/tabicon/select/shouye.png"//选中时的图标
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "./static/tabicon/default/wode.png",
"selectedIconPath": "./static/tabicon/select/wode.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
页面配置
可以单独配置不同的window配置 页面文件夹下的json就是页面配置文件
例如 /me/me:
me.json
{
"usingComponents": {},
"navigationBarBackgroundColor": "#ccc",//当前页面标题栏背景色
}
sitemap
此配置用于配置小程序页面是否被微信索引,json文件 默认所有页面被索引 微信搜索程序时可以配置此项z
生命周期
Page({
//页面的初始数据
data: {
name:"李连杰",
parms:{a:2,b:2}
},
//生命周期函数--监听页面加载
onLoad: function (options) {
},
//生命周期函数--监听页面初次渲染完成
onReady: function () {
},
//生命周期函数--监听页面显示
onShow: function () {
},
//生命周期函数--监听页面隐藏
onHide: function () {
},
//生命周期函数--监听页面卸载
onUnload: function () {
},
* 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh: function () {
},
//页面上拉触底事件的处理函数
onReachBottom: function () {
},
// 用户点击右上角分享
onShareAppMessage: function () {
}
})
this.setData
//设置data数据
this.setData({
name:\'成龙\',
parms:{a:3}
})
条件渲染
<view wx:if="{{isshow}}">张三</view>
<video ws:else>李四</video>
for循环
wx:for//循环的对象 wx:for-item 循环值 wx:fro-index 循环索引 for-item for-index 默认item index
<view
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="index"
>
{{index+item}}
</view>
block标签
渲染时会把block标签移除掉 相当于占位符
<block>
{{value+key}}
</block>
事件绑定
微信小程序事件通过bind绑定
wxml:
<input bindinput="chenage" type="text"/>
<view>
值:{{num}}
</view>
js:
chenage(e){
this.setData({//不能直接使用this.data.num修改必须使用setData方法来修改
num:e.detail.value
})
},
data: {
num:0
},
参数传递
微信小程序无法在事件触发中穿参数 解决方法 通过自定义属性传递
wxml:
<button bindtap="append" data-val="11">+</button>
js:
append(e){
let {val}=e.currentTarget.dataset
}
wxss
rpx单位
将屏幕分为750份
1rpx = 750 / 屏幕宽度
当屏幕宽度等于750 时 rpx=1px
页面大小像素= 750 rpx
1px = 页面宽度/750
100px = 750rpx*100 / page宽度
样式导入
支持@import 导入css样式 @import "/a.wxss" 也可以和less混合使用
选择器和less
特别注意小程序不支持 * 通配符 其他的一样支持 class elementName id ::after ::before
使用less
使用编译器 安装插件 easy less
打开vscode 设置 配置文件settings.json
"less.comite":{
outExt:\'wxss\'
}
编译less文件之后自动生成一个wxcss文件
常用组件
view text input button image navigater icon swiper radio checkbox rich-text 等
介绍
view 代替原来的div
hover-class="" 当用户按下自动添加类
hover-stare-time 按下后多就触发
hover-stay-teim 松开后多久失效
hover-stop-propagetion 阻止冒泡
text 文本标签
selectable 是否可选 true/false 默认false
decode 是否解码 true/code 默认false &npsp;
image
src 文件路径
mode 图片缩放 裁剪 scaleToFill 默认 拉伸填充
lazyl-load 图片懒加载 true/false 默认false
跟多官网查=看
swiper 轮播图
swiper-item 轮播内容
circular=\'true\' 衔接滚动
indicator-dots7 是否显示小点 true/false
navigator 路由跳转
url 跳转地址
target 当前小程序内跳转还是其他小程序 默认self 当前小程序
open-type 跳转方式
默认保留当前页面 跳转后含有返回按钮可以返回 但是不能跳转到tabbar
微信提供给api
//路由跳转
wx.redirectTo({
url:\'/pages/login1/index\'
})
//提示
wx.showToast({
title: \'完成\',
})