小程序基础
目录结构
程序主体
- app.js
- app.json 程序配置
- app.wxss 公共样式
页面
- index.js
- index.json 页面配置
- index.wxml 页面结构
- index.wxss 页面样式
其中,js和wxml必须存在
配置
程序配置 -->app.json
- pages 页面路径
- window 页面的窗口表现
- tabBar 底部tab切换
- network Timeout 网络超时配置
- debug 是否开启调试
页面配置
- window 页面的窗口表现
注册(js文件中)
注册程序
一次,App({})
,会得到一个程序的实例,可以被其他页面访问
注册页面
每个页面都需要,Page({})
程序生命周期
App
- onLaunch 程序启动时执行
- onShow 切换到小程序时执行
- onHide 切换到后台时执行
Page
- onLoad 页面加载时执行(只一次)
- onReady 初始化时完成/第一次渲染完成之后(只一次)
- onShow 页面显示时执行
- onHide 页面隐藏时执行
- onUnload 页面卸载时执行(只一次)
- tab切换是涉及隐藏和显示
- NavigatorTo load 之前的页面hide
- NavigatorBack Unload 之前的页面show
数据渲染
//js
let arr1 = ['john','jim','jerry','siee']
let arr2 = [{id:Math.random(),name:'tom'},{id:Math.random(),name:'jerry'},{id:Math.random(),name:'mary'}
Page({
data: {
name:"Siee",
people:{
n1:111,
n2:222
},
names:arr1,
some:arr2
}
})
<!--html-->
<view class="container">
<view>{{name}}</view>
<view>{{people.n1}}</view>
<view>n1 + n2:{{people.n1 + people.n2}}</view>
<view>n1 > n2:{{people.n1 > people.n2}}</view>
<view wx:for="{{names}}" wx:key="*this">{{item}}</view>
<view wx:for="{{some}}" wx:key="id">{{item.name}}</view>
</view>
条件渲染
Page({
data: {
score:96
}
})
<view wx:if="{{score>70 && score<90}}">等级B</view>
<view wx:elif="{{score>0 && score<70}}">等级C</view>
<view wx:else>等级A</view>
block
Page({
data: {
name:"Siee",
score:96
}
})
<block wx:if="{{score === 96}}">
<view>{{name}}</view>
<view>{{score}}</view>
<view>优</view>
</block>
<block wx:else>
分数不符合要求
</block>
block是虚拟节点,不会渲染在页面中
循环和block
Page({
data: {
some:arr2
}
})
<block wx:for="{{some}}" wx:key="id">
<view>{{item.name}}</view>
<view>啦啦啦</view>
</block>
使用模版
模版的书写 要有name属性作为标识
<template name="renderName">
<view>{{name}}</view>
</template>
放入虚拟节点时
<template name="renderList">
<block wx:for="{{some}}" wx:key="id">
<view>{{item.name}}</view>
<view>啦啦啦</view>
</block>
</template>
<template name="renderScore">
<block wx:if="{{score === 96}}">
<view>{{name}}</view>
<view>{{score}}</view>
<view>优</view>
</block>
<block wx:else>
分数不符合要求
</block>
</template>
模版的使用 is属性填写设置的name,data给模版传入数据;可以使用es6语法简写
Page({
data: {
name:"Siee",
score:96,
some:arr2
}
})
<template is="renderScore" data="{{name,score}}"></template>
<template is="renderList" data="{{some:some}}"></template>
<template is="renderName" data="{{name:'Siee'}}"></template>
模版复用
模版可以单独写入template.wxml
;文件若只当前页面引入就存在当前文件夹,若多个页面引用可以放入common
文件夹;引用时:
<import src="template.wxml"/>
另一种模版复用
include
标签所在位置,内容会直接替换成header.wxml
中的内容
<include src="header.wxml"/>
事件
bind:事件类型=“回调函数名字” 有冒泡;冒号可以省略
<view bind:tap="onTap">点我打印信息</view>
Page({
onTap(event){
console.log(event)
}
})
部分打印结果
currentTarget:{ //触发事件的节点
dataset:{}, //通过data-前缀设置
id:"", //设置id会使操作很便捷
},
detail:{ //点按的横纵坐标
x:数字,
y:数字
},
target:{ //真正点按的节点
dataset:{}, //通过data-前缀设置
id:"", //设置id会使操作很便捷
},
type:"tap" //事件类型
阻止冒泡
把bind换成catch
样式 wxss
单位:rpx
规定屏幕宽度是750rpx,自适应
支持的选择器
- .class
- #id
- element
- element,element
- :after
- :before
作用域
页面的wxss只对当前页面有效,是局部作用域,在页面容器.container
外层还有个<page></page>
标签,也可以设置样式
app.wxss
是全局作用域,里面的样式会应用在每个页面
公共样式引入
@import '路径';
行间样式
可以是字符串,也可以是表达式
<text style="font-size:20pt;color:{{color}};">点我打印信息</text>
Page({
color:"orange"
})
wxs辅助渲染
小程序的脚本语言,与JavaScript语法类似,不支持ES6语法
Page({
names:'Siee,Tom,Jerry,Setich'
//是一个字符串,而不是数组,需要用wxs做处理
})
<wxs module="tool"> //作为标识
function createNames(names){
return names.split(',') //转为数组
}
module.exports = createNames; //抛出
</wxs>
<view wx:for="{{tool(names)}}">{{item}}</view> //使用,传递参数
也可以,tool.wxs
文件下
function createNames(names){
return names.split(',') //转为数组
}
module.exports = createNames; //抛出
使用:
<wxs src="tool.wxs" module="tool"></wxs>
更新页面(异步更新页面)
访问实例 this
调用API setData
<viewclass="pressBtn">
<view>{{magicNumber}}</view>
<text bind:tap="onTap">点我打印信息</text>
</view>
<view>{{num}}</view>
let maN = Math.random()
Page({
data: {
magicNumber:maN,
num:Math.floor(maN*1000)
}
onTap(){
this.setData({
magicNumber: Math.random()
})
let {magicNumber} = this.data;
this.setData({
num:Math.floor(magicNumber*1000)
})
}
})
组件
- 组件是视图层的基本组成单元
- 组件自带一些功能与微信风格的样式
注意:所有组件与属性都是小写,以连字符-连接
常用组件
进度条
<progress percent="60" color="orange"></progress>
刚开始不会显示,因为
align-items: center;
所以手动加上宽度就好了
输入框
<input type="text" value="" bindinput="onInputChange"/>
onInputChange(event){
console.log(event.detail.value)
// return Math.random()
}
bindinput 不要有冒号!
自定义组件
pages中新建文件夹,名字自定义,要包括wxml,wxss,js,json文件
wxml中,写结构
wxss中,写样式
js中,注册Component({})
json中,配置{"component":true}
在应用组件的文件夹中也要加入配置,然后就可以应用了
{
"usingComponents":{
"magic-number":"/pages/magicNumber/mnum"
}
}
<magic-number></magic-number>
要用连字符链接,直接可以作为标签使用;路径不需要带后缀
自定义组件的事件和属性
事件
注意现在写的不是页面而是组件,所以函数要写在methods:{}
中
想要组件中的数据影响页面中数据,要用到triggerEvent
方法
Component({
data:{
magicNumber:Math.random()
},
attached(){ //在组件实例进入页面节点树时执行
this.triggerEvent('getMagicNumber',this.data.magicNumber)
},
methods:{
onTap(){
this.setData({
magicNumber:Math.random()
})
this.triggerEvent('getMagicNumber',this.data.magicNumber)
}
}
})
<magic-number bind:getMagicNumber="onGetMagicNumber"></magic-number>
Page({
onGetMagicNumber(event){
console.log(event)
this.setData({
num: Math.floor(event.detail*1000)
})
}
})
属性
定义属性properties
<magic-number now-in="Index" bind:getMagicNumber="onGetMagicNumber"></magic-number>
Component({
properties:{
nowIn: String
}
})
<view class="pressBtn">
<view>{{magicNumber}}</view>
<text bind:tap="onTap">点我打印信息</text>
</view>
<view>{{nowIn}} is here!</view>
在
attached
中打印this.data
会同时出现data和自定义属性中的内容
路由
- 跳转到
- 重定向
- 跳到某个tab
- 回退
- 重加载
navigator
url
open-typenavigate
wx.navigatorTo(object)
redirectwx.redirectTo(object)
switchTabwx.switchTab(object)
navigateBackwx.navigateBack(object)
reLaunchwx.reLaunch(object)
使用navigator组件跟使用API导航效果一样
授权API
授权方式
用户信息
授权button
<button
open-type="getUserInfo"
bindgetuserinfo="onGetUserInfo"
>获取用户信息</button>
出现弹框:选择->拒绝和允许
拒绝时,detail:{errMsg:"getUserInfo:fail auth deny"}
允许时,detail:{errMsg:"getUserInfo:ok"}
其它授权信息
wx.authorize(object)
先进行授权,直接获取信息,未授权会先进行授权
wx.authorize({
scope:'scope.userLocation', //授权地理位置
success: msg => console.log(msg,'location success'),
fail: e => console.log(e,'location fail')
})
wx.getLocation({
type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
success: function(res){
console.log(res)
},
fail: function(e) {
console.log(e)
},
complete: function() {
// complete
}
})
如果获取位置授权被拒绝,将不会再出现弹框
wx.getSetting({
success: msg => console.log(msg)
})
//返回结果
authSetting:{
scope.userInfo:true
scope.userLocation:true
}
//获取过授权的都会显示在这里,被拒绝的为false,允许的为true
如果想要重新设置授权信息
wx.openSetting({ //打开授权信息面板
success: msg => console.log(msg) //回调函数在设置完毕后执行
})
使用缓存
//异步
wx.setStorage({
key: 'name',
data: {p1:'Siee'},
success: function(res){
wx.getStorage({
key:'name',
success: (data) => console.log(data)
})
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
//同步
wx.setStorageSync('names', 'Tom')
let ns = wx.getStorageSync('names')