WX小程序
小程序提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务。
一、组件
- text文本组件(类似HTML的span,示例代码如下)
<text>起飞</text>
- view区域(类似HTML的div,示例代码如下)
<view>
<text>view区域</text>
</view>
- button按钮(同HTML按钮)
<button>按钮</button>
- input文本框同HTML文本框
<input type="text" />
- img图片
<image src="路径">图片</image>
- 包含include
<!-- include 相当于拷贝,就是不拷贝template的内容 -->
<view class="title">include导入非template</view>
<include src="/template/test"></include>
- 导入import
<view class="title">模板</view>
<import src="/template/test"/>
<template is="user" data="{{...userInfo}}"></template>
<template is="user" data="{{...userInfo2}}"></template>
二、模板语法
- 文本渲染(示例代码如下)
var msg = "起飞"
<text>{{msg}}</text>
// 跟vue模板语法一样
- 条件渲染(示例代码如下)
data:{
score:10,
}
<view class="title">多重条件</view>
<view wx:if="{{score>100}}">波士顿龙虾</view>
<view wx:elif="{{score>50}}">小青龙</view>
<view wx:elif="{{score>30}}">小龙虾</view>
<view wx:else>泥鳅</view>
- 列表渲染(示例代码如下)
data:{
list:[
"唱",
"跳",
"RAP",
"篮球",
"ji"
],
}
<view wx:for="{{list}}" wx:key="item">{{index}}----{{item}}</view>
- 自定义列表渲染(示例代码如下)
data:{
list:[
"唱",
"跳",
"RAP",
"篮球",
"ji"
],
}
<view wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myind" wx:key="myind">{{myind+1}}----{{myitem}}</view>
- import(示例代码如下)
<import src="/template/test"/>
<template is="user" data="{{...userInfo}}"></template>
<template is="user" data="{{...userInfo2}}"></template>
// test.wxml文件
<template name="user">
<view>name:{{name}}</view>
<view>fly:{{int}}</view>
</template>
<view>
你蜘蛛在上路,你在干什么
</view>
<view>
我很气,接下来,一并超
</view>
- include(示例代码如下)
//test代码
<template name="user">
<view>name:{{name}}</view>
<view>fly:{{int}}</view>
</template>
<view>
你蜘蛛在上路,你在干什么
</view>
<view>
我很气,接下来,一并超
</view>
<hr />
<view class="title">include导入非template</view>
<include src="/template/test"></include>
<view>import只能导入模板template ,include只能拷贝非template的内容</view>
三、事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息,如 id, dataset, touches。
类型 | 触发条件 | 最低版本 |
---|---|---|
touchstart | 手指触摸动作开始 | |
touchmove | 手指触摸后移动 | |
touchcancel | 手指触摸动作被打断,如来电提醒,弹窗 | |
touchend | 手指触摸动作结束 | |
tap | 手指触摸后马上离开 | |
longpress | 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 | |
longtap | 手指触摸后,超过350ms再离开(推荐使用 longpress 事件代替) | |
transitionend | 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 | |
animationstart | 会在一个 WXSS animation 动画开始时触发 | |
animationiteration | 会在一个 WXSS animation 一次迭代结束时触发 | |
animationend | 会在一个 WXSS animation 动画完成时触发 | |
touchforcechange | 在支持 3D Touch 的 iPhone 设备,重按时会触发 |
部分事件示例代码如下
// size是大小,type是颜色,bindtap是事件
// bindtap事件
// js代码
tapHd(){
wx.showToast({
title: '我要起飞了',
})
},
showMsg(e){
wx.showToast({
title: e.target.dataset.msg,
})
},
<button size="mini" type="primary" bindtap="tapHd">按钮</button>
//事件传参
<button type="primary" bindtap="showMsg" data-msg="我出美甲的窃魂券了">按钮1</button>
<button type="warn" bindtap="showMsg" data-msg="从你身上窃取12层杀人书,我很气">按钮2</button>
四、双向绑定
- 表单的双向绑定(示例代码如下)
// js代码
changeMsg(e){
console.log(e)
this.setData({msg:e.detail.value})
},
//wxml代码
<input
value="{{msg}}"
bindinput="changeMsg"
style="border: 1rpx solid red;padding: 15rpx;margin: 15rpx;"
type="text"/>
<view>{{msg}}</view>
五、美妙清单实例(包括本地存储)
// wxml代码
<!--pages/todo/todo.wxml-->
<input
style="border: 1px solid red; margin-top: 10px;"
value="{{temp}}"
bindconfirm="confirmHd"
bindinput="inputHd"
type="text"/>
<view class="list">
<view wx:for="{{list}}" wx:key="title" class="item">
<text>{{item.title}}</text>
<text size="mini" type="warn" bindtap="delItem" data-item="{{item}}">x</text>
</view>
</view>
// js代码
// pages/todo/todo.js
Page({
/**
* 页面的初始数据
*/
data: {
list:[]
},
// 实现删除
delItem(e){
console.log(e)
var list = this.data.list
// 查找下标
var ind = list.findIndex(value=>value.title===e.target.dataset.item.title);
// 删除list中ind个
list.splice(ind,1);
// 更新视图
wx.setStorage({
key:"list",
data:this.data.list
})
this.setData({list})
},
confirmHd(){
// 获取原来的list
var list = this.data.list
// 添加到最前面
list.unshift({
done:false,
title:this.data.temp
})
// 更新list和temp
wx.setStorage({
key:"list",
data:this.data.list
})
this.setData({list,temp:''})
},
// 更新temp
inputHd(e){
this.setData({
temp:e.detail.value
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
var arr=[];
wx.getStorage({
key: 'list',
success(res) {
console.log(res.data)
arr=res.data;
}
})
setTimeout(()=>{
this.setData({list:arr});
console.log(this.data.list)
},10)
// console.log(options)
},
六、事件的传参
共有四种传参方式
1.路径传递
通过在url后面拼接参数,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 ‘path?key=value&key2=value2’。
示例代码:
//A页面跳转代码
goB(){
wx.navigateTo({
url: '/pages/B/index?id=value',
})
},
//B页面接收代码
onLoad: function (options) {
console.log('id', options.id)
}
2.全局变量
通过App.js全局对象存放全局变量。
示例代码如下:
//app.js代码
App({
// 存放对象的全局变量
globalData:{},
})
//A页面跳转代码
// 获取App对象
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
userInfo: {
name: 'cym',
age: 16
}
},
goB() {
app.globalData.userInfo = this.data.userInfo
wx.navigateTo({
url: '/pages/B/index',
})
},
})
//B页面接收代码
// 获取全局对象
const app = getApp()
Page({
onLoad: function (options) {
console.log(app.globalData.userInfo)
}
})
//存放在 App 全局变量里面,可以被多个页面使用,直接从 App 对象获取即可。这个数据是保持在内测中,每次小程序销毁就没有了。
七、wx的api
是wx内置的方法
弹出提示
示例代码:
wx.showToast({title:"",icon:})
网络请求工具
示例代码
wx.request()
停止下拉刷新
示例代码:
wx.stopPullDownRefresh()
本地存、取
示例代码:
wx.setStorageSync(key,value)
wx.getStorageSync(key)
八、wx的配置
全局配置
在app.json里面进行配置
页面配置
在index.json里面配置
//1.导航栏
"backgroundTextStyle": "light",
//背景文字颜色 light | dark
//2.导航栏
"navigationBarBackgroundColor": "#f70",
//背景颜色
//3.导航栏
"navigationBarTitleText": "小程序基础语法",
//导航栏表情
//4.导航栏
"navigationBarTextStyle": "white"
//导航栏+状态栏文字颜色 white | black
//5.页面
"enablePullDownRefresh": true,
//允许页面下拉刷新
//6.使用组件
"usingComponents": {"组件路径"}
九、页面跳转
微信小程序的页面跳转分为组件跳转和js实现跳转
组件跳转
navigator:
path:跳转的页面
opentype:
//navigate 跳转,redirect 重定向(不理历史记录),switchTab 切换底部栏,navigateBack
JS实现跳转
wx.navigateTo //跳转
wx.switchTab //底部栏切换
wx.redirectTo //重定向
wx.navigateBack() //返回
十、小程序的页面栈
- 小程序默认会缓存5个页面栈
- A=>B=>C=>D=>E这5个页面都会缓存
- navigate 添加一个缓存页面栈
- navigateBack 移除一个页面栈
- redirect 替换一个一个页面栈
十一、小程序的全局数据
- 在app.js里定义
//定义全局数据
globalData: {
num:5
}
//页面使用
//获取app
const app = getApp();
//onShow中用全局数据更新本地数据
this.setData({count:app.globalData.num})
//更新时候要更新本地和全局
addCount(){
// 更新本地count
this.setData({
count:this.data.count+1
})
// 更新全局的num
app.globalData.num +=1
},
十二、小程序的自定义组件
//步骤:
//01 创建一个组件
//02 在页面中注册组件
"usingComponents": {
"item":"/components/item/item"
}
//03 在页面中使用组件
<item></item>
组件的构造函数
- externalClasses外部类
- properties:父组件传入的属性(参数)
- data组件内部的数据
- methods组件的方法
组件的传参(父传子)
//子组件接收
properies:{
title:{type:String,value:''}
}
//子组件页面wxml使用
{{title}}
//子组件js的methods中使用
this.data.title
子传父
//子组件js
this.triggerEvent("toggle",{value:true})
//父组件。wxml
<item bind:toggle="toogleHd">
//父组件.js
toggleHd(e){
//获取
e.detial.value
}
外部类
//子组件.js
externalClasses:[item-class]
//子组件.wxml
<view class="item item-class">
//父组件wxml传入
<item item-class="myItem">
//父组件.wxss
.myItem{ height:100rpx !important!;color:red;}
十三、小程序的获取
分享
//open-type来控制
<button open-type="share" class="btn">分享</button>
获取头像
<button class="mini-btn" bindtap="getProfile">获取信息</button>
getProfile(){
var that = this;
wx.getUserProfile({
desc: '需要授权',
success:function(res){
console.log(res);
// 存储在本地用户信息
wx.setStorageSync('userInfo', res.userInfo)
// 更新到data里面
that.setData({userInfo:res.userInfo});
// that.login();
}
})
},
登录
getUserProfile只能获取到用户的头像和昵称,不能作为唯一标识符合与后端进行交互,
01
wx.login() 获取code
把code发送给自己服务器(也可以加userInfo)
02
自己的服务器向微信服务器发送code+appid+AppSecret
换取唯一标识符 openid
03
通过openid可以实现登录,注册,权限等功能
监听滚动
- onPageScroll
回到顶部/固定位置
wx.pageScrollTo({
duration: 500, //时间
scrollTop:0, //位置
})
wx.pageScrollTo({
duration: 500,
selector:".share"
})
获取设置/窗口信息
wx.getSystemInfoSync();
获取电量
wx.getBatteryInfoSync();
打电话/发短信
wx.makePhoneCall({
phoneNumber: '13598859747',
})
下载网络图片(权限)
wx.downloadFile()
wx.saveImageToPhotosAlbum()
保存到相册
上传图片
wx.chooseMedia({
count:1})
wx.uploadFile({
filePath: res.tempFiles[0].tempFilePath
})
设置标题
wx.setNavigationBarTitle({
title: '自定义组件',
})
十四、小程序的分包
小程序的限制打包上传每个每个包不超过2M
总大小16M,本地存储 每次 1M,总大小10 /0M
底部栏2-5个
页面栈5个
所以进行分包
打开小程序 默认只下载主包
小程序的打开速度加快
通过分包可以让项目更加庞大
//分包
"subpackages": [
{
"root": "news",
"pages": [
"pages/detail/detail"
]
}
],
// 分包预加载
"preloadRule": {
"pages/jok/jok": {
"network": "all",
"packages": [
"news"
]
}
},
十五、小程序的云开发
概念
- 云数据库(moogoDB)
- 云函数(nodejs)
- 云存储
作用:
- 让前端脱离后端直接链接数据库和存储
- 写好nodejs ,根据一定的规则操作业务数据,链接数据库,在把nodejs上传到云端
- 在客户端调用nodejs对应的方法,获取服务器数据
云函数定义
- config配置
- package.json 包管理
- js逻辑
//01 导入wx 的sdk 初始化云
const cloud = require('wx-server-sdk')
cloud.init()
//02 导入数据库
const db = cloud.database();
//03 导出
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
//当前微信的环境
// event 调用函数传入的参数
return {} 返回的数据
})
//云函数写好要上传到服务器
调用云函数
wx.cloud.callFunction({name:"addMsg",data:{}})
.then()
.catch()
name云函数的名称,
data 传入的参数
数据库操作
查
- db.collection(“guest”).get()
- skip() 跳过
- orderby(“date”,“desc”) 日期从大到小
- limit ()限制
- .count() 查询总数
增
- db.collection(“guest”).add({data:{}})
// data是添加的数据
删除
- db.collection(“guest”).doc(event.id).remove()
云文件的操作
wx.cloud.uploadFile({})
//cloudPath 文件名(存储到服务器的)
//path 本地缓存文件
//success成功 res.fileID文件地址
wx.chooseMedia({})
count:9,//最多选择数量
//res.tempFiles[i].tempFilePath