在上传小程序的时候,本地设置都要勾选不校验合法域名、web-view(业务域名)、TLS版本已经HTTPS证书的选项
小程序的主体部分:
1、app.js(小程序的主要逻辑层,用来注册小程序,必要)
2、app.json(小程序公共配置,必要)
3、app.wxss(小程序公共样式,可省略)
app.json文件中,page注册页面,window配置界面窗口的信息
小程序当中没有view标签,用view来代替
小程序生命周期
onLauch 监听小程序初始化
onShow 监听小程序启动或切前台
onHide 监听小程序切后台
页面生命周期
onLoad 监听页面加载
onShow 监听页面启动或切前台
onReady 监听页面初次渲染完成
onHide 监听页面切后台
onUnload 监听页面卸载
flex弹性布局
在父容器上加上display:flex,将父容器编程弹性容器
.sort_box{
display: flex;
flex-direction: row; //水平排列
margin: 0 30rpx;
justify-content: space-around; //每个项目两端间隔相等
}
小程序中没有DOM,不能利用JS的document来获取元素
小程序的条件渲染
<view style="text-align:center">考试成绩{{score}}分</view>
<view wx:if="{{score<60}}">不及格</view>
<view wx:elif="{{score>=80}}">优秀</view>
小程序的循环渲染
wx:for绑定数组,wx:for-item值为当前项目的变量名,wx:for-index值为当前下标的变量名
<block wx:for="{{list}}" wx:for-item="item">
<view class="item">
<view class="item_img">
<image src="{{item.img}}"></image>
</view>
<view class="item_name">{{item.name}}</view>
</view>
</block>
catch与bind的事件机制
bind会应用到冒泡机制,catch会阻止事件冒泡
捕获阶段的bind与catch用到的,绑定事件需要加上冒号
capture-bind:tap(绑定事件)
capyure-catch:tap(绑定事件)
常用路由的跳转方法
wx.navigateTo()--保留当前页面,跳转到应用内的某个页面,但是不能跳转到tabbar页面
wx.switchTap()--跳转到tabbar页面,并关闭其他所有非tabbar页面
wx.relaunch()--关闭所有页面,打开到应用内的某个页面
wx.redirectTo()--关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到tabbar页面
wx.navigateBack()--关闭当前页面,返回上一页面或多级页面
微信小程序进行云开发项目搭建
1、初始化小程序端以及云函数端
小程序端初始化,wx.cloud.init()方法,正常放在根目录的app.js文件中
云函数初始化,存放在cloudfunction文件夹,各云函数的index.js中
const cloud = require('wx-server-sdk')
cloud.init({
env:cloud.DYNAMIC_CURRENT_ENV
})
exports.main = async(event, context) =>{
return event
}
2、配置login云函数,若要调用云开发中的数据库操作,必须获取用户的openid才能调用,不然会显示错误
1)先安装好node与npm(自行查找安装方式,安装最新版本即可)
2)在cloutfunction/login中,通过命令行输入npm install --save wx-server-sdk@latest,安装wx-server-sdk
3)然后修改根目录中的app.js,env的参数,改成云开发环境的id
4)同步cloudfunction的云函数列表,上传并部署login文件夹
3、前端进行云开发数据库的增删改查
首先必须添加云数据库的集合
增:onAdd()函数
onAdd: function(){
const db = wx.cloud.database()
db.collection('集合名称').add({
data:{
上传的内容
},
success: res=>{
console.log("Upload success")
},
fail: res=>{
console.log("Uplaod fail")
}
})
}
//promise风格
onAdd2: function(){
const db = wx.cloud.database()
db.collection('集合名称').add({
data:{
上传的内容
},
.then(res =>{
console.log(res)
})
.catch(console.error)
})
}
删:onRemove()函数
onRemove: function() {
if(this.data.counterId){//判断所要删除的数据存不存在
const db = wx.cloud.database()
db.collection('集合名称').doc('所要删除数据的索引')
.remove({
success: res =>{
console.log('删除成功')
},
fail: err =>{
console.log('删除失败')
}
})
}else{
console.log('所删除的数据不存在')
}
}
若是想要删除多条数据的话,则需要通过云函数来操作
const cloud = require('wx-server-sdk')
const db = cloud.database()
const _ = db.command
export.main = async (event, context) => {
try{
return await db.collection('集合名称').where({
'定位需要删除的数据'
}).remove()
}catch(e){
console.error(e)
}
}
改:onUpdate()函数
onUpdate: function() {
const db = wx.cloud.database();
db.collection('集合名称').doc('需要修改数据索引').
update({//局部更新,只更新指定字段
data:{
修改的数据
},
success: res=>{
console.log('修改成功')
},
fail:err =>{
console.log('修改失败')
}
})
}
onUpdate2: function() {
const db = wx.cloud.database()
db.collection('集合名称').doc('需要修改数据索引').
set({//替换更新,把原有的整条记录覆盖掉
修改的数据
})
}
若是想要更新多条数据的话,则需要通过云函数来操作
const cloud = require('wx-server-sdk')
const db = cloud.database()
const _ = db.command
export.main = async (event, context) => {
try{
return await db.collection('集合名称').where({
'定位需要修改的数据'
}).update({
date:{
修改的内容
}
})
}catch(e){
console.erroe(e)
}
}
查:onQuery()函数,只能查询有_openid的值
onQuery: function(){
const db = wx.cloud.database()
db.collection('集合名称').where({
_openid:this.data.openid //相当于唯一key值
}).get({
success: res=>{
this.setData({
queryResult:JSON,stringify(res.data, null, 2) //queryResult接受数据库传回数据
})
console.log('查询成功')
},
fail:err => {
console.error('查询失败')
}
})
}
//查询单条数据
onQuery2: function(){
const db = wx.cloud.database()
db.collection('集合名称').doc('查找的id').get().then({res=>{
console.log(res.data)
}})
}
//查询多条数据
onQuerys: function(){
const db = wx.cloud.database()
db.collection('集合名称').where({
_openid:'user-open-id',
查询的索引
}).get()
}
//查询一个集合(默认传回20条数据)
onQueryList: function(){
const db = wx.cloud.database();
db.collection('集合名称').get().then(res=>{\
console.log(res.date)
})
}
//条件查询
onQuerywhere: function(){
const db = wx.cloud.database()
db.collection('集合名称').where({
progress:db.command.'查询指令'
//多条件查询
progress:db.command.'查询指令'.and('查询指令')
})
}
查询指令集合为
后台操作步骤如下,该操作多放在云函数文件夹中
const cloud = require(wx-serve-sdk)
cloud.init()
const db = cloud.database()
const MAX_LIMIT = 100 //一次最大传送数据条数
export.main = async (event, context)=>{
//获取所有集合的总数
const countResult = await db.collection('集合名称').count()
const total = countResult.total
//分批次读取数据
const batchTimes = Math.cell(total/100)
const tasks = []
for(let i = 0; i< batchTimes; i++){
const promise = db.collection('集合名称').skip(i*MAX_LIMIT).limit(MAX_LIMIT).get()
tasks.push(promise)
}
return (await Promise.all(tasks)).reduce((acc, cur) => {
return {
data:acc.data.concat(cur.data),
errMsg:acc.errMsg
}
})
}
匹配查询