微信小程序云开发
微信小程序水平居中,垂直居中
display: flex;
justify-content: center;
align-items: center;
毛玻璃效果(图片模糊)
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
输入框提示内容 placeholder=""
"window":{
"backgroundTextStyle":"light", //下拉提示
"navigationBarBackgroundColor": "#fff", //导航栏背景颜色
"navigationBarTitleText": "WeChat", //导航标题文字
"navigationBarTextStyle":"black", //标题颜色
"enablePullDownRefresh": "true" //是否开启下拉 默认False
}
不能直接在json上注释,不然会出现
Expecting 'STRING', got INVALID
###bind 和 cath 绑定函数的区别
在组件中使用 bindXXX 属性来绑定事件,如 <button bindTap="tapFunction">按钮</button>
,为按钮组件添加点击事件
在微信小程序中 bind 和 catch 都可以绑定处理事件,但 catch 可以捕获事件,不让事件冒泡传递,bind的事件会传递给父级组件
云数据库
app.js中要加入初始化语句
// 开启云开发
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
微信小程序云数据库类似于 MongoDB
微信小程序云数据库支持的数据类型:
String:字符串
Number:数字
Object:对象
Null:空值
Array:数组
以下都使用promise风格的回调函数处理:
db.collection('tag').get().then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
},
手动添加数据库集合(字段),
在使用云数据库时,需要先在js文件中初始化数据库:const db = wx.cloud.database();
切换数据库环境:
const testDB = wx.cloud.database({
env:"test" #云数据名称
})
插入数据
insert:function(){
db.collection('user')
.add({
data:{
name:'jerry',
age:'20'
}
})
.then(res=>{
console.log('success!')
})
.catch(err=>{
console.log('error')
})
},
更新数据
update:function(){
db.collection('user')
.doc('96c1cbbe5cd6e5c6103b4fb019193281')
.update({
data:{
name:'lala'
}
})
},
查询数据
search:function(){
db.collection('user')
.where({
name:'lala'
})
.get()
.then(res=>{
console.log(res)
})
},
删除数据
微信小程序删除云数据库中单条数据时,可以通过 .doc(‘_id’) 方法定位到数据,然后使用 .remove() 方法删除,微信小程序是没有批量删除权限的,需要调用云函数进行批量删除
delete:function(){
db.collection('user')
.doc('96c1cbbe5cd6e5c6103b4fb019193281')
.remove()
.then(res=>{
console.log('delete success!')
})
.catch(err=>{
console.log('delete error!')
})
},
上传文件
upimage:function(){
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
// 选择后上传云数据库
wx.cloud.uploadFile({
cloudPath: new Date().getTime() + '.png', // 上传至云端的路径
filePath: tempFilePaths[0], // 小程序临时文件路径
success: res => {
// 返回文件 ID
console.log(res.fileID)
db.collection('images')
.add({
data:{
fileID: res.fileID
}
})
.then(res2=>{
console.log('updata image success!')
})
.catch(err2=>{
console.log('updata image error'+err2)
})
},
fail: console.error
})
}
})
},
下载文件
downImg:function(event){
console.log(event)
wx.cloud.downloadFile({
fileID: event.target.dataset.fileid, // 文件 ID
success: res => {
// 返回临时文件路径
console.log(res.tempFilePath)
// 保存图片到手机相册
wx.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success(res) {
wx.showToast({
title: '保存成功',
})
}
})
},
fail: console.error
})
},
小程序文件下载流程
使用云函数发送请求
第一步: 新建云函数
第二步:安装request 请求库
npm install --save request
npm install --save request-promise
第三步:引入库
var rp = require('request-promise');
第四步:请求网页
#请求例子
rp('http://www.google.com')
.then(function (htmlString) {
// Process html...
})
.catch(function (err) {
// Crawling failed...
});
count方法获取集合总记录数
const result=await db.collection("user").count();
const num=result.total;
// 一行代码
const num=(await db.collection("user").count()).total
遇到的问题
微信小程序开发者工具构建npm提示没找到node_modules目录(解决方法)
必须在npm init后,再用npm install –production,最后在npm i vant-weapp -S –production -verbose,第二步很关键,要是先安装了node_modules, npm init是不起作用的
本作品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可。