这是云开发的快速启动指引,其中演示了如何上手使用云开发的三大基础能力:
职位包括公司信息
.page{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.confirmPsdText{
font-weight: 10 !important;
}
.farther{
position:relative;
}
.child{
position:absolute;
bottom:0;
}
button[disabled]{
background: rgb(126, 146, 137)!important;
color: black!important;
}
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
switch (表达式) {
case 变量:
语句;
case 数字:
语句;
break;
case 字符串:
语句;
break;
default:
语句;
}
let mode=0;
console.log(`mode is ${mode}`);
let data={a:1,b:2};
let {c,d}=data;
console.log(c,d);
以下代码的最外层可以替换为block元素,因为view每次需要渲染,和块不需要
<view wx:for="{{show}}">
<view>
<text>{{item}}</text>
</view>
<view>
<image src=""></image>
,不是<img src=""></img>
,已经坑了自己两次了; .publicitySwiper{
height:100%;
border-bottom: yellow 1px solid;
}
.publicitySwiper image{
width: 100%;
height: 98%;
}
使用本地地址
和网络地址
.网上说的本地图片需要使用base64转码这个说法不对;getWxInfo(e){
let headImg = e.detail.userInfo.avatarUrl
}
widthFill
即可<view wx:if="{{ !a }}">逻辑非</view>
<view wx:if="{{ a || b }}">逻辑或</view>
<view wx:if="{{ a && b }}">逻辑与</view>
<view wx:if="{{ a > 5 }}">6</view>
<view wx:elif="{{ a < 5 }}">4</view>
<view wx:else>5</view>
<view wx:for='{{dateArr}}' class='{{item.isToday}}'></view>
wk:key='循环中的参数'
可以增加读取效率,可以理解为用数组中的哪个参数进行排序,如果没有需要设置的参数,可设置为key="*this"
。<view wx:for='{{dateArr}}' key="*this" class='{{item.isToday}}'></view>
以下案例在点击事件获取后,date参数一般在e.currentTarget.dataset.date,或是e.target.dataset中
<view data-date='19:30' ></view>
注意: data-方法指定的参数,所有大写字母会变为小写。如需赋值属性时goHome,那么应该设置为data-go-home,h在读取时会变为大写。
<!-- 基本用法 -->
<view class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>
<!-- 多条件判断 -->
<view class='{{conId==0?'orange':(conId==1?'blue':'purple')}}'>
//将值赋值给上一页的data,相当于在上一页使用的this.setData
prevPage.setData({
choice_time: dateList
})
//返回上一页
wx.navigateBack({
delta: 1
})
let searchBar = this.selectComponent('#search-bar');//指向wxml文件中 自定义组件的id
searchBar.clearInput();//clearInput为自定义组件中的函数
<canvas canvas-id="canvas" style="width:{{cWidth}}px;height:{{cHeight}}px;position: absolute;left:-1000px;top:-1000px;"></canvas>
data: {
cWidth: 0,
cHeight : 0,
},
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album'],
success(res) {
let imgurl = res.tempFilePaths[0]
wx.getImageInfo({
src: imgurl,
success: function(res){
//---------利用canvas压缩图片--------------
var ratio = 2;
var canvasWidth = res.width //图片原始长宽
var canvasHeight = res.height
while (canvasWidth > 400 || canvasHeight > 400){// 保证宽高在400以内
canvasWidth = Math.trunc(res.width / ratio)
canvasHeight = Math.trunc(res.height / ratio)
ratio++;
}
that.setData({
cWidth: canvasWidth,
cHeight: canvasHeight
})
//----------绘制图形并取出图片路径--------------
var ctx = wx.createCanvasContext('canvas')
ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
ctx.draw(false, setTimeout(function(){
wx.canvasToTempFilePath({
canvasId: 'canvas',
destWidth: canvasWidth,
destHeight: canvasHeight,
success: function (res) {
let imgpath=res.tempFilePath //这里去除压缩后的图片
//..到此图片压缩结束,这里可添加转为base64的代码
//
//
//
},
fail: function (res) {
console.log(res.errMsg)
}
})
},100)) //留一定的时间绘制canvas
}
})
}
})
wx.getFileSystemManager().readFile({
filePath: imgpath, //选择图片路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
console.log('data:image/png;base64,' + res.data)
that.data.comEdit.comImg='data:image/png;base64,' + res.data
}
})
主要用来大批量获取数据库数据并返回
能不用就不要用云函数,踩不完的坑!
npm install -save wx-server-sdk@latest
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db=cloud.database();
const _=db.command;
// 云函数入口函数
exports.main = async (event, context) => new Promise((resolve, reject) =>{
// 在1.5 秒后返回结果给调用方(小程序 / 其他云函数)
setTimeout(() => {
resolve(returnInfo)//返回结果在前端的res.result里面
}, 1500)
})
db.colletion(集合名).get().then(res=>{
//....数据库调用成功的代码写这里
}).then(res=>{
//....如果上一个then中的又调用了db数据库,并且成功了,后续代码可以写这里。.then可以循环叠加
}).cath(=>err{
//....处理返回错误的结果
})
db.collection('Data_User').where({
PHONE:"13962310765"
}).get().then(res => {
return res.data;
})
//注意,数据在res的data集合中。
await db.collection("库名").add({
data:{
//....
}
}).then(res=>{
//....
})
导入css样式不能使用官方文档的方法,需要使用
@import '/miniprogram_npm/@vant/weapp/common/index.wxss';
官方文档有坑
<!-- html -->
<van-uploader file-list="{{ fileList }}" deletable="{{ true }}" max-count="{{3}}"
bind:after-read="afterRead" bind:delete="imgdelte" />
fileList变量名是固定的,更改会报错。
data: {
fileList:[]//子元素为字典形式的,格式为{url:"..."}
},
deletable为可删除 max-count为最大图片可选数量,这才是正确的参数 after-read为选择图片后的触发事件
//图片选择后获取临时路径并上传
afterRead(event) {
const { file } = event.detail;
console.log('获取临时文件 file:',file.url)
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
this.data.fileList.push({url:file.url,deletable: true,})
this.data.comEdit.img_num=this.data.fileList.length
console.log(this.data.fileList)
this.setData({
fileList:this.data.fileList,
comEdit: this.data.comEdit
})
},
delete为触发图片删除事件
//------图片删除事件
imgdelte(event){
let index=event.detail.index
this.data.fileList.splice(index,1)
this.data.comEdit.img_num=this.data.fileList.length
this.setData({
fileList:this.data.fileList,
comEdit: this.data.comEdit
})
},
设置后,插件会遍历fileList中的url,把图片全部显示出来。手动选择完图片会出来缩略图,达到最大选择数量胡隐藏选择器。
https://console.cloud.tencent.com/cam/capi
登陆后,点击左侧导航中的【用户】——【用户列表】——主页面中点击【新建用户】——【快速创建(推荐)】—— 填写用户名后 点击【创建用户】。
务必注意系统自动生成的密码比较复杂,点击右侧【发送】按钮,把密码发送到邮箱。如果没有发送在用户列表中点击密码重置。(子账户首次登陆时会提示修改密码.)
左侧导航栏中,点击【用户】——【用户设置】,按自己需求定义即可。
https://cloud.tencent.com/login/subAccount/100006684481?type=subAccount 登陆后选中【登陆其它账号】—— 填写账号密码登陆即可
appId:1300230822 SecretId: AKIDylW7YmAwJRYCwRwQovorTTj5Rknt9QqH SecretKey: KZaLrDI1d8VWHmzwpjOlrhIfkr4DkbCb
地址: https://console.cloud.tencent.com/smsv2/csms-sign
官方文档:https://cloud.tencent.com/document/product/382/43197
npm install tencentcloud-sdk-nodejs --save
如果下载速度慢就用文档中的其它方法
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。