共计 27790 个字符,预计需要花费 70 分钟才能阅读完成。
2020 年注定是不平庸的一年,一场冠状疫情的暴发,让人们忽然意识到生命的可贵,人们对生命从新有了新的意识。谱写了太多的悲伤,太多惆怅,太多的眼泪和辛酸。珍惜当下,敬畏生命,敬畏天然。
上面围绕这些标准写内容
- 文章的创新型
- 文章的实用性
– 代码的可借鉴性
- 代码的标准度
小程序云开发入门到实际:
wx.cloud.init({
// env 参数:// env 参数
// 小程序发动的云开发调用(wx.cloud.xxx)会默认申请到哪个云环境的资源
// 此处请填入环境 ID, 环境 ID 可关上云控制台查看 如不填则应用默认环境(第一个创立的环境)// env: 'my-env-id',
traceUser: true,
})
wx.cloud.init({
env: 'da-da',
traceUser: true,
})
云函数的配置与部署
1. 下载安装 node.js,node.js 是在服务端运行 JavaScript 的运行环境,云开发所应用的服务端环境是 node.js,npm 是 Node 包管理器,通过 npm 能够不便的装置云开发所应用的依赖包。
node --version
npm --version
关上电脑终端(Windows 电脑为 cmd 命令提示符,Mac 电脑为终端 Terminal)
如果用淘宝镜像 cnpm
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm --version
上传到云存储的文件都有一个全网惟一的 fileID,fileID 只用于小程序外部,能够将 fileID 传入到 SDK 就能够对文件进行下载,删除,获取文件信息等操作,十分不便。
<image src="fileID"></image>
体验一下函数的调用:
能够获取用户的 openid,用户在小程序里有举世无双的 openid,雷同的用户在不同的小程序 openid 也不同,因而咱们能够用 openid 来辨别用户,能够应用云函数的 Cloud.getWXContext()来获取用户的 openid
获取用户信息:
<button
open-type="getUserInfo"
bindgetuserinfo="onGetUserInfo"
class="userinfo-avatar"
style="background-image: url({{avatarUrl}})"
size="default"
></button>
onLoad: function() {
// 获取用户信息
wx.getSetting({
success: res => {if (res.authSetting['scope.userInfo']) {
// 曾经受权,能够间接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
this.setData({
avatarUrl: res.userInfo.avatarUrl,
userInfo: res.userInfo
})
}
})
}
}
})
},
onGetUserInfo: function(e) {if (!this.data.logged && e.detail.userInfo) {
this.setData({
logged: true,
avatarUrl: e.detail.userInfo.avatarUrl,
userInfo: e.detail.userInfo
})
}
},
小程序的 open-data 能够用于展现微信用户的信息,能够在 miniprogram 目录 index 文件夹下的 index.wxml 文件:
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>
<open-data type="userCity" lang="zh_CN"></open-data>
<open-data type="userProvince" lang="zh_CN"></open-data>
<open-data type="userCountry" lang="zh_CN"></open-data>
学习小程序开发 - 云开发我感觉挺好,上面总结一下:
小程序是一种新的凋谢能力,开发者能够疾速地开发一个小程序,小程序能够在微信内被便捷地获取和流传,同时具备杰出的应用体验。
第一,速度快,无需下载安装,加载速度快于 HTML5,微信登录,随时可用;第二,无需适配,一次开发,多端兼容,罢黜了对各种手机机型的适配;第三,反对间接或 app 分享给微信好友和群聊;第四,可达到近乎原生 app 的操作体验和晦涩度,在离线状态亦可应用;第五,用完即走,顺手可得,通过扫码,长按,微信搜寻,公众号,好友举荐等形式疾速获取服务,用完即走;第六,低门槛,已有公众号的组织可疾速注册,可疾速生成门店小程序。
小程序的技术倒退过程:
HTML5:能力很少;体验差;强烈依赖于开发者的素质
H5+JSSDK:无奈管控;平安问题;依赖开发者素质
小程序:强治理;对立开发体验
小程序语言:
渲染层:WXML+WXSS
逻辑层:JavaScript
配置:JSON
小程序设计标准:
敌对:重点突出,流程明确
清晰:导航明确,缩小期待,异样反馈
便捷:缩小输出,防止误操作,操作晦涩
对立:视觉对立,WeUI
小程序经营标准:
账号信息:名称形容清晰,与性能统一,资料实在
服务类目:类目与页面内容统一,便捷可用
性能:残缺可用,无举荐、排行榜,无搜寻小程序,不互推
数据:获取用户数据时需告知,不得私下收集用户数据
个别如果你关上一个小程序我的项目报错如下:
未找到入口 app.json 文件,或者文件读取失败,请查看后从新编译。
别怕是因为你须要理解小程序文件构造:
小程序蕴含一个形容整体程序的 app 和多个形容各自页面的 page。
app.js 是小程序逻辑,app.json 是小程序公共设置,app.wxss 是小程序公共样式表。
什么是组件,组件是以某种形式对业务逻辑和性能进行封装。
slot
component.wxml
<!-- 组件模板 -->
<view class="wrapper">
<view> 组件的外部节点 </view>
<slot></slot>
</view>
page.wxml
// 援用组件的页面模板
<view>
<component-tag-name>
<view> 插入到组件 slot 中的内容 </view>
<component-tag-name>
</view>
多 slot
component.js
Component({
options: {multipleSlots: true // 在组件定义时的选项中启用多 slot 反对},
properties: { },
methods: {}})
component.wxml
// 组件模板
<view class="wrapper">
<slot name="before"></slot>
<view> 组件的外部细节 </view>
<slot name="after"></slot>
</view>
// 援用组件的页面模板
page.wxml
<view>
<component-tag-name>
// 这部分内容将被搁置在组件 <slot name="before"> 的地位上 -->
<view slot="before"> 这里是插入到组件 slot name="before" 中的内容 </view>
// 这部分内容将被搁置在组件 <slot name="after"> 的地位上 -->
<view slot="after"> 这里是插入到组件 slot name="after" 中的内容 </view>
</component-tag-name>
</view>
说说云开发是什么?
云开发是微信团队联结腾讯云提供的原生 Serverless 云服务,致力于帮忙更多的开发者疾速实现小程序业务的开发,疾速迭代。
一行代码创立数据:
db.collection('todos').add({
data: {
description: 'learn cloud dadaqianduan.cn',
done: false
},
success(res){console.log(res)
}
})
一行代码查问数据
db.collection('todos').doc('todoidentifiant-aleatoire').get({success(res) {console.log(res.data)
}
})
云开发 QuickStart 界面:
点击获取 openid:
跟着提醒操作能够查看:
点击上传图片
前端操作数据库
新增记录
onAdd: function() {const db = wx.cloud.database()
db.collection('counters').add({
data: {count: 1},
success: res => {
// 在返回后果中会蕴含新创建的记录的_id
this.setData({
counterId: res._id,
count: 1
})
wx.showToast({title: '新增记录胜利',})
console.log('新增')
},
fail: err => {
wx.showToast({
icon: 'none',
title: '新增失败'
})
console.error('失败')
}
})
}
onAdd 办法会往 counters 汇合新增一个记录,新增如下格局的一个 JSON 记录:
{
"_id": "数据库主动生成记录 ID 字段",
"_openid": "数据库主动插入记录创建者的 openid",
"count": 1
}
// 查问
onQuery: function() {const db = wx.cloud.database()
// 查问以后用户所有的 counters
db.collection('counters').where({_openid: this.data.openid}).get({
success: res => {
this.setData({queryResult: JSON.stringify(res.data, null, 2)
})
console.log('')
},
fail: err => {
wx.showToast({
icon: 'none',
title: '失败'
})
console.log('');
}
})
}
// 更新
onCounterInc: function() {const db = wx.cloud.database()
const newCount = this.data.count + 1
db.collection('counters').doc(this.data.counterId).updata({
data: {count: newCount},
success: res => {
this.setData({count: newCount})
},
fail: err=>{
icon: 'none',
console.error('')
}
})
},
onCounterDec:function() {const db = wx.cloud.database()
const newCount = this.data.count - 1
db.collection('counters').doc(this.data.counterId).updata({
data: {count: newCount},
success: res => {
this.setData({count: newCount})
},
fail: err=>{
icon: 'none',
console.error('')
}
})
}
删除性能
onRemove: function() {if (this.data.counterId) {const db = wx.cloud.database()
db.collection('counters').doc(this.data.counterId).remove({
success: res => {
wx.showToast({title: '删除胜利',})
this.setData({
counterId: '',
count: null,
})
},
fail: err => {
wx.showToast({
icon: 'none',
title: '删除失败',
})
console.error('[数据库] [删除记录] 失败:', err)
}
})
} else {
wx.showToast({title: '无记录可删,请见创立一个记录',})
}
},
疾速创立云函数
// 云函数入口函数
exports.main = async (event, context) => {console.log(event)
console.log(context)
return {sum: event.a + event.b}
}
开发云我的项目,进行 QuickStart 小程序革新:
须要把 miniprogram 文件夹下的 pages,images,components,style 文件夹里的文件,文件夹都要状况,app.wxss 里的款式代码都要清空,将 app.json 的 pages 配置项设置为:
"pages": ["pages/index/index"],
云开发我的项目目录:
project // 你的小程序我的项目
├── cloudfunctions // 云函数根目录
│ └── login //login 云函数目录,能够通过右键云函数根目录来新建
├── miniprogram // 你原有的小程序文件寄存的目录
└── project.config.json
在 project.config.json 增加 miniprogramRoot 配置
"cloudfunctionRoot": "cloudfunctions/",
"miniprogramRoot":"miniprogram/",
小程序的文件构造
设置小程序窗口体现
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
底部都有一个 带有小图标 的切换 tab,icon 大小限度为 40kb,倡议尺寸为 81px * 81px,留神格局要是 png 哦
小程序的根目录:
├── image
├── pages
├── utils
├── app.js
├── app.json
├── app.wxss
├── project.config.json
├── sitemap.json
相对路径与绝对路径
./ 代表当前目录 <img src=”./img/icon.jpg”/> 等同于 <img src=”img/icon.jpg”/>
../ 代表上一级目录
/ 指的是以后根目录,是绝对目录;<img src=”/img/icon.jpg”/>
应用 uniCloud
首先将 cli 我的项目导入 HBuilderX,在我的项目根目录(src 同级)创立 cloudfunctions-aliyun 或者 -tcb 目录,而后关上 src/manifest.json,在根底配置,uni-app 利用示意,处点击从新获取。
<template>
<view class="content">
<view class="btn-list">
<button type="primary" @click="fun">test</button>
</view>
</view>
</template>
<script>
export default {data() {
return {imageSrc: ''}
},
methods:{fun:function () {console.log('函数运行......');
uni.showLoading();
uniCloud.callFunction({
name:"add",
data:{
name:"graceUI",
age : 20
}
}).then((res)=>{uni.hideLoading();
console.log(res);
var msg = res.result;
uni.showToast({title:msg.msg})
});
}
}
}
</script>
<style>
.btn-list{margin:25rpx;}
</style>
uniapp 搭建云开发服务项目
创立云服务空间,右键关上 cloudfunctions 创立云服务空间 会关上 web 控制台
创立的云函数,所有操作都是右键上传或者部署云函数
下面讲到 uniCloud,那么什么是 uniCloud 呢?
uniCloud 是 Dcloud 联结阿里云,腾讯云,为 uniapp 的开发者提供的基于 serverless 模式和 js 编程的云开发平台
uniCloud 的益处在于用相熟的 js,轻松搞定前台整体业务。不论用什么服务器运维,弹性扩容,防 DDos 攻打,全都不须要操心
其实客户端调用云函数,如下:
uniCloud.callFunction()// 调用
云开发 api-云开发 API
wx.cloud
wx.cloud.database()
wx.cloud.database().command
wx.cloud.database().command.aggregate
提前发动权限设置
wx.authorize({
scope: 'scope.record',
success () {
// 用户曾经批准小程序应用录音性能,后续调用 wx.startRecord 接口不会弹窗询问
wx.startRecord()}
})
1. 云开发 api 分类
2. 云开发 api 初始化办法
3. 云开发 api 应用注意事项
初始化 服务端
npm install --save wx-server-sdk
const cloud = require('wx-server-sdk')
cloud.init({env: 'test-x' // 环境 id})
云开发的初始化选项反对传入一个 Object,指定各个服务应用的默认环境
云开发 api 应用注意事项:
1. 云开发 api 同时反对 callback 格调和 promise 格调
2. 云开发 api 初始化时如果没有设置 id,默认应用先创立的那个
3. 在服务端能够借助云开发 sdk 内置的 getWXContext 来获取到用户的身份信息
云开发数组查问
const db = wx.cloud.database();
const _ = db.command;
db.collection("todos")
.where({progress: _.in([0,100])
})
.get({
success: console.log,
fail: console.error
});
Index.js
const db = wx.cloud.database();
const _ = db.command
Page({query: function() {console.log('query')
db.collection('data')
.where({count: _.nin([1,3,4])
})
.get().then(console.log)
}
})
理解网络状态
wx.getNetworkType({success(res) {console.log(res)
}
});
所在的手机以后的网络状态是 WiFi、3G、4G、5G
获取设施信息
wx.getSystemInfo({success (res) {console.log("设施的所有信息",res)
console.log(res.model)
console.log(res.pixelRatio)
console.log(res.windowWidth)
console.log(res.windowHeight)
console.log(res.language)
console.log(res.version)
console.log(res.platform)
}
})
获取用户手机的微信版本、操作系统及版本、屏幕分辨率、设施的型号与品牌、根底库版本等信息。
页面链接跳转
wx.navigateTo({url: '/pxxx'})
wx.navigateBack({delta: 1})
返回页面的上一层
显示音讯提示框
wx.showToast({
title: '弹出胜利',
icon: 'success',
duration: 1000
})
设置以后页面的题目
wx.setNavigationBarTitle({title: 'xxxx'})
关上文件选择器上传文件
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {const tempFilePaths = res.tempFilePaths}
})
小程序上获取用户信息的四种模式
wx.login -> 获取 code 仅可用于获取 openid, unionid 和 session\_key
button -> 用户首次需应用按钮模式,提醒用户被动点击按钮,方可获取用户信息
wx.getUserInfo -> 用户首次受权后,调用该接口能够获取用户信息,openid 和 unionid,需调用 session\_key 解密前方可取得
open-data -> 仅可用于展现用户数据,js 逻辑层无奈获取
小程序云开发:
云函数:wx.cloud.callFunction;数据库:wx.cloud.database;文件存储:wx.cloud.uploadFile
第一步创立云开发,其目录构造:
云函数:cloudfunctions
前端代码:miniprogram
图片等资源:images
页面目录: pages
全局配置:app.js – app.json
全局款式文件:app.wxss
我的项目配置文件:project.config.json
我的项目里应用创立的环境,在 app.js 文件配置
//app.js
App({onLaunch: function () {if (!wx.cloud) {console.error('请应用 2.2.3 或以上的根底库以应用云能力')
} else {
wx.cloud.init({
// env 参数阐明:// env 参数决定接下来小程序发动的云开发调用(wx.cloud.xxx)会默认申请到哪个云环境的资源
// 此处请填入环境 ID, 环境 ID 可关上云控制台查看
// 如不填则应用默认环境(第一个创立的环境)env: 'my-env-id',
traceUser: true,
})
}
this.globalData = {}}
})
b
其实调用云函数文件:
sum() {
wx.cloud.callFunction({
name: 'sum',
data: {
a: 2,
b: 5
}
}).then(res=>{console.log(res);
}).catch(err=>{console.log(err);
});
}
获取以后用户 openid:
<view> 云函数 </view>
<button bindtap="getOpenId"> 获取以后用户 openid</button>
getOpenId() {
wx.cloud.callFunction({name: 'login'}).then(res=>{console.log(res);
}).catch(err=>{console.log(err);
})
}
批量删除的代码是怎么写的呢,如下:
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database();
// 云函数入口函数
exports.main = async(event, context) => {
try{return await db.collection('user').where({name: 'jeskson'}).remove()}catch(e){console.log(e);
}
}
getDelete() {
wx.cloud.callFunction({name: 'bataDelete',}).then(res=>{console.log(res);
}).catch(err=>{console.error(err);
})
}
云开发模式:
小程序端 -》原生接口 -》云开发:云数据库,云函数,云存储,云调用,HTTP API
创立数据库:
能够在 uniCloud 中间接创立,也能够通过 node.js 的后盾代码来创立,在 uniapp 中,为了平安起见,是不容许客户端间接调用数据库,而是通过客户端调用云函数,元函数调用数据库的模式
数据库和汇合的援用:
const db=uniCloud.database();
const ban=db.collection('汇合名');// 汇合名就是数据表的名称
db.createCollection(collectionName)// 创立汇合
数据库的增删改查
const db=uniCloud.database();
const ban=db.collection('汇合名');
ban.get().then(res=>{console.log(res)
}).catch(msg=>{console.log(msg)
});
// 获取汇合中的数据,promise 写法
ban.get({sucess:(res)=>{console.log(res)
},
fail:(msg)=>{console.log(msg)
}
});
// 第二种写法
// 这里只简略的介绍,具体的可查看 官网文档
ban.where({
name:"查问的 name",index:查问的下标等
}).get().then(res=>{console.log(res)
}).catch(e=>{console.log(msg)
});
// 增加
ban.add({
data:{
id: 要增加的 id,name:要增加的 name
}
}).then(res=>{console.log(res)
}).catch(e=>{console.log(msg)
});
// 更新
ban.doc('id').update({
data:{name:'要替换的属性名'}
}).then(res=>{console.log(res)
}).catch(e=>{console.log(msg)
});
ban.doc('id').set({
data:{
name:'要替换的属性名',id:要替换的 id 名
}
}).then(res=>{console.log(res)}).catch(e=>{console.log(msg)});
// 删除数据,只能每次删除一条
ban.doc('id').remove({}).then(res=>{console.log(res)
}).catch(e=>{console.log(msg)
});
云存储:uploadFile(Object object)
uni.chooseImage({
count: 1,
success: (res) => {console.log(res);
var path=res.tempFilePaths[0];// 获取以后图片的门路
uniCloud.uploadFile({
filePath: path, // 以后图片门路
cloudPath: 'img', // 文件名
success: (res1) => {console.log(res1);
}
})
}
})
// promise 写法
const result = await uniClound.uploadFile({filePath: filePath});
deleteFile(Object object) 删除云端文件
// promise 写法
uniCloud
.deleteFile({fileList: ['云贮存的 ID'];// 字符串类型的数组
})
.then(res => {});
// callback 写法
uniCloud.deleteFile(
{fileList: ['云贮存的 ID'],
success(){},
fail(){},
complete(){}
}
);
客户端调用云函数:
//index.js 云函数文件
'use strict';
uniCloud.init();
const db=uniCloud.database();
exports.main = async (event, context) => {return new Promise((resolve,reject)=>{db.collection('banner').get().then(res=>{resolve(res);
}).catch(msg=>{reject(msg);
})
})
};
onLoad() {
uniCloud.callFunction({// 客户端调用云函数,云函数调用数据库
name:'index',
success:(res)=> {console.log(res);
var ban=res.result.data[0].banner;
console.log(ban);
}
})
},
uni-app 应用微信小程序云函数的步骤
批改 manifest.json
"mp-weixin" : {
/* 小程序特有相干 */
"appid" : "4555xxxxxxxx",
"cloudfunctionRoot": "./functions/",
"setting" : {"urlCheck" : false},
"usingComponents" : true
}
装置 copy-webpack-plugin
插件
npm install -save copy-webpack-plugin;
讲列表索引:
<view wx:for="{{newstitle}}" wx:key="*this">
{{item}}
</view>
其中
*this 示意在 for 循环中的 item 自身,而 {{item}} 的 item 是默认的。
<view wx:for-items="{{newstitle}}" wx:for-item="title" wx:key="*this">
{{title}}
</view>
- block 并不是一个组件,只是一个包装元素,不会在页面中做任何渲染,只承受管制属性
!0 // 返回 true
!true // 返回 false
!false // 返回 true
!'' // 返回 true
!'yes' // 返回 false
!["ok"] // 返回 false
!{} // 返回 false
!!true // 返回 true
!!{} // 返回 true,!!false // 返回 false
!!"" // 返回 false
hidden 属性:
<view wx:if="{{false}}"> 组件不显示不渲染 </view>
<view hidden="{{true}}"> 组件不显示 </view>
<view hidden> 组件不显示 </view>
<view hidden="{{false}}"> 组件显示 </view>
audio 组件,是音频组件:
- src:要播放音频的资源地址
- poster:默认控件上的音频封面的图片资源地址
- name:默认控件上的音频名字
- author:默认控件上的作者名字
video 组件,是示意视频的组件:
- autoplay:是否自动播放
- loop:是否循环播放
- muted:是否静音播放
- inital-time:指定视频初始播放地位,单位是秒
- controls:是否显示默认播放控件
地图:
<map
id="myMap"
style="width: 100%; height: 300px;"
latitude="{{latitude}}"
longitude="{{longitude}}"
markers="{{markers}}"
covers="{{covers}}"
show-location
></map>
latitude: 2xxx.5xxxx3,
longitude: 1xx.xxx28,
markers: [{
id: 1,
latitude: xxx2.5xxxxx,
longitude: 1xxx.xxx28,
title: '深圳 xxx'
}],
在地图上标记多个点
markers: [{
id: 1,
latitude: xxx2.5xxxxx,
longitude: 1xxx.xxx28,
title: '深圳 xxx'
},
{...
- callout: 点击 marker 呈现气泡 callout、以及气泡上的 label
- circle:在地图上显示圆,比方用于显示方圆几公里
- polygon:指定一系列坐标点,比方圈出理论的范畴
- polyline:指定一系列坐标点,比方跑步的路线
转发性能:
onShareAppMessage: function (res) {if (res.from === 'button') {console.log(res.target)
}
return {
title: '云开发',
path: "pages/home/home",
imageUrl:"https://happ.jpg",
success: function (res) {// 转发胜利},
fail: function (res) {// 转发失败}
}
},
自定义顶部导航栏
"window":{"navigationStyle":"custom"}
小程序的客服
<button open-type="contact"></button>
web-view 承载网页的容器。
<web-view src="https://mp. zxxx"></web-view>
获取用户信息
<button open-type="getUserInfo"> 弹出受权弹窗 </button>
音讯弹框
wx.showToast({
title: '胜利',
icon: 'success',
duration: 2000
})
title
icon:只有三个选项,success、loading、none
duration:提醒提早的工夫 1.5 秒
弹出模态对话框
wx.showModal({
title: '学习',
content: '学习',
showCancel: true,
confirmText: '确定',
success(res) {if (res.confirm) {console.log('用户点击了确定')
} else if (res.cancel) {console.log('用户点击了勾销')
}
}
})
title 属性不是必填
content 属性也不是必填
showCancel 默认值就是 true
confirmText 默认值为确定
手机振动
手机振动 API 分两种,一种是长振动,一种是短振动
wx.vibrateLong({success(res) {console.log(res)
},
fail(err) {console.error(err)
},
complete() {console.log('振动实现')
}
})
弹出操作菜单
wx.showActionSheet({itemList: ['1', '2', '3', '4'],
success(e) {console.log(e.tapIndex)
}
})
页面路由
redirectTo 敞开以后页面,跳转到利用内的某个页面。然而不容许跳转到 tabbar 页面
navigateTo 保留以后页面,跳转到利用内的某个页面。然而不能跳到 tabbar 页面
navigateBack 敞开以后页面,返回上一页面或多级页面。
switchTab 跳转到 tabBar 页面,并敞开其余所有非 tabBar 页面
reLaunch 敞开所有页面,关上到利用内的某个页面
生命周期
App() 必须在 app.js 中调用,必须调用且只能调用一次
App({onLaunch: function (options) {// 监听小程序初始化},
onShow:function(options){// 监听小程序启动或切前台},
onHide:function(){ // 监听小程序切后盾},
onError:function(msg){// 谬误监听函数},
onPageNotFound:function(){ // 页面不存在监听函数},
onUnhandledRejection:function(){// 未解决的 Promise 回绝事件监听函数},
onThemeChange:function(){// 监听系统主题变动}
})
页面的生命周期函数:
Page({data: {// 页面的初始数据},
onLoad: function(options) {// 监听页面加载},
onShow: function() {// 监听页面显示},
onReady: function() {// 监听页面首次渲染实现},
onHide: function() {// 监听页面暗藏},
onUnload: function() {// 监听页面卸载},
onPullDownRefresh: function() {// 监听用户下拉动作},
onReachBottom: function() {// 页面上拉触底事件的处理函数},
onShareAppMessage: function () {// 用户点击右上角转发},
onPageScroll: function() {// 页面滚动触发事件的处理函数},
onResize: function() {// 页面尺寸扭转时触发},
onTabItemTap:function(){// 以后是 tab 页时,点击 tab 时触发}
})
onLaunch 与 onShow
onLaunch 是监听小程序的初始化,初始化实现时触发,全局只会触发一次
onShow 是在小程序启动,或从后盾进入前台显示时触发,也就是它会触发很屡次
正在加载中
App({onLaunch: function () {
wx.showLoading({title: "正在加载中",})
},
globalData: {}})
App({onLaunch: function () {
wx.showLoading({title: "正在加载中",})
},
onShow (options) {
wx.hideLoading({success: (res) => {console.log("加载实现,所以暗藏掉了")
},
})
},
globalData: {}})
小程序关上场景值
App({onLaunch: function (options) {console.log('打印小程序启动时的参数',options)
},
})
path: "" // 页面门路
query: {} // 页面的参数
referrerInfo: {} // 起源小程序、公众号或 App 的 appId
scene: 1047 // 场景值
shareTicket: // 带 shareTicket 的转发能够获取到更多的转发信息,例如群聊的名称以及群的标识 openGId
理解 wx.login、wx.getSetting
App({onLaunch: function () {
wx.login({success(res){console.log('wx.login 失去的数据',res)
}
})
wx.getSetting({success(res){console.log('wx.getSetting 失去的数据',res)
}
})
},
globalData: {userInfo: null}
})
获取用户信息 wx.getUserInfo
首先须要判断用户是否容许
wx.getSetting({success(res){console.log('wx.getSetting 失去的数据',res)
if (res.authSetting["scope.userInfo"]){
wx.getUserInfo({success(res){console.log("wx.getUserInfo 失去的数据",res)
}
})
}
}
})
UserInfo
用户信息
属性
string nickName
用户昵称
string avatarUrl
用户头像图片的 URL。
number gender
用户性别
string country
用户所在国家
string province
用户所在省份
string city
用户所在城市
string language
显示 country,province,city 所用的语言
globalData
wx.getUserInfo({success(res){console.log("wx.getUserInfo 失去的数据",res)
this.globalData.userInfo = res.userInfo
}
})
Promise 调用形式
wx.getNetworkType()
.then(res => {console.log(res)
})
.catch(err => {console.log(err)
})
云函数入门
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV,})
exports.main = async (event, context) => {
const sum = event.a + event.b
return sum
}
云函数的调用
wx.cloud.callFunction({
name: 'sum',
data: {
a: 15,
b: 23,
}
}).then(res => {console.log("云函数返回的后果",res)
}).catch(err => {console.log("云函数调用失败",err)
})
wx-server-sdk 是微信小程序服务器端的 SDK
SDK 包含用于微信免鉴权的公有协定、云数据库、云存储、云调用等根底能力,因而每一个云函数都会应用到 wx-server-sdk 这个 Node 包。
云函数的初始化
const cloud = require('wx-server-sdk')
cloud.init({env: 'x' // 换成你的云函数 envId})
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV // 留神它不是字符串,不要加引号})
cloud.DYNAMIC_CURRENT_ENV 标记的是云函数以后所在的环境
const cloud = require('wx-server-sdk')
cloud.init({env:cloud.DYNAMIC_CURRENT_ENV})
exports.main = async (event, context) => {const {width,height} = event
console.log("长方形的周长与面积",[(width+height)*2,width*height])
return {circum:(width+height)*2,
area:width*height
}
}
云数据库入门
wx.cloud.database().collection('汇合名').where({_id:'记录的 id'}).update({"字段名":"字段值"})
wx.chooseImage()
<button bindtap="chooseImg"> 抉择图片 </button>
<image mode="widthFix" src="{{imgurl}}"></image>
<view> 上传的图片 </view>
chooseImg:function(){
const that=this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
const imgurl = res.tempFilePaths
that.setData({imgurl})
}
})
},
count:能够抉择的照片数量,默认为 9 张
sourceType:抉择图片的起源,album 就是图片能够来自手机相册;而 camera 是能够来自手机拍照
sizeType
所选的图片的尺寸,original 为原图,compressed 为压缩图
tempFilePaths为临时文件的 门路列表 ,tempFiles 为长期 文件列表
image 组件有默认宽度 300px、高度 225px
上传多张照片
data: {imgurl:[],
},
<view wx:for-items="{{imgurl}}" wx:for-item="item" wx:key="*this">
<image mode="widthFix" src="{{item}}"></image>
</view>
获取图片信息
wx.getImageInfo()
chooseImg:function(){
let that=this
wx.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
const imgurl = res.tempFilePaths
console.log('chooseImage 回调打印的 res',res)
that.setData({imgurl})
wx.getImageInfo({src: res.tempFilePaths[0],
success(res){console.log('getImageInfo 回调打印的 res',res)
}
})
}
})
},
wx.previewImage()预览
previewImg:function(){
wx.previewImage({
current: '',
urls: this.data.imgurl,
})
},
保留图片到相册
saveImg:function(e){
wx.saveImageToPhotosAlbum({
filePath: "/images/xx.jpg",
success(res) {
wx.showToast({title: '保留胜利',})
}
})
}
压缩图片
wx.compressImage()
上传文件
chooseFile: function () {
let that = this
wx.chooseMessageFile({
count: 5,
type: 'file',
success(res) {console.log('上传文件的回调函数返回值',res)
}
})
},
上传地理位置
chooseLocation: function () {
let that= this
wx.chooseLocation({success: function(res) {
const location=res
that.setData({location})
},
fail:function(res){console.log("获取地位失败")
}
})
},
<map style="width: 100%; height: 300px;"
latitude="{{location.latitude}}"
longitude="{{location.longitude}}"
show-location
></map>
下载文件
downloadFile(){
const that = this
wx.downloadFile({
url: 'https://h.jpg',
success (res) {console.log("胜利回调之后的 res 对象",res)
if (res.statusCode === 200) {// 如果网络申请胜利
that.setData({downloadFile:res.tempFilePath})
}
}
})
},
downloadFile(){
const downloadTask = wx.downloadFile({
url: 'https://xxx.jpg',
success (res) {if (res.statusCode === 200) {
that.setData({downloadFile:res.tempFilePath})
}
}
})
downloadTask.onProgressUpdate((res) => {console.log('下载进度', res.progress)
console.log('曾经下载的数据长度', res.totalBytesWritten)
console.log('预期须要下载的数据总长度', res.totalBytesExpectedToWrite)
})
},
预览文档 wx.openDocument()
openDoc(){
wx.downloadFile({
url: 'https://x1.pdf',
success (res) {console.log("胜利回调之后的 res 对象",res)
if (res.statusCode === 200) {
wx.openDocument({
filePath: res.tempFilePath,
success: function (res) {console.log('打开文档胜利')
},
fail:function(err){console.log(err)
}
})
}
}
})
},
保留文件与文件缓存 wx.saveFile
保留文件则是把图片由临时文件挪动到本地存储里
先调用 wx.downloadFile
再调用 wx.saveFile
将文件缓存的门路存储到页面的 data 对象
调用 wx.openDocument
关上这个门路
downloadPDF(){
const that = this
wx.downloadFile({
url: 'https://xx.pdf',
success (res) {console.log("胜利回调之后的 res 对象",res)
if (res.statusCode === 200) {
wx.saveFile({
tempFilePath: res.tempFilePath,
success (res) {console.log(res)
that.setData({savedFilePath:res.savedFilePath})
}
})
}
}
})
},
openPDF(){
const that = this
wx.openDocument({
filePath:that.data.savedFilePath,
success: function (res) {console.log('打开文档胜利')
},
fail:function(err){console.log(err)
}
})
}
获取已保留的缓存文件列表
wx.getSavedFileList({success (res) {console.log(res.fileList)
}
})
获取缓存文件的信息
获取临时文件的信息,应用的是wx.getFileInfo
获取缓存文件调用的信息,应用的则是wx.getSavedFileInfo
wx.getSavedFileInfo({
filePath:"http://.pdf",// 这是缓存文件的门路
success(res){console.log(res)
}
})
文件管理器
wx.getFileSystemManager()
来获取全局惟一的文件管理器
const fs = wx.getFileSystemManager()
文件管理器次要治理的就是 wx.env.USER_DATA_PATH
目录里的文件
const fs = wx.getFileSystemManager()
// 创立一个文件夹
fs.mkdir({
dirPath:wx.env.USER_DATA_PATH+"/cloudbase",
success(res){console.log(res)
},
fail(err){console.log(err)
}
})
// 读取文件夹下有哪些文件,会返回文件夹内文件列表
fs.readdir({
dirPath:wx.env.USER_DATA_PATH,
success(res){console.log(res)
},
fail(err){console.log(err)
}
})
// 新建一个文本文件 test,并往文件里写入数据
fs.writeFile({
filePath:wx.env.USER_DATA_PATH+"/cloudbase"+"/test",
data:"dadaqianduan.cn",
encoding:"utf8",
success(res){console.log(res)
}
})
// 新增一些内容
fs.appendFile({
filePath:wx.env.USER_DATA_PATH+"/cloudbase"+"/test",
data:"dadaqianduan.cn 达达前端",
encoding:"utf8",
success(res){console.log(res)
}
})
// 读取 test 文本文件里的内容
fs.readFile({
filePath:wx.env.USER_DATA_PATH+"/cloudbase"+"/test",
encoding:"utf-8",
success(res){console.log(res)
}
})
chooseImage:function() {
const that = this
wx.chooseImage({
count: 1,
success(res) {
that.setData({tempFilePath: res.tempFilePaths[0]
})
}
})
},
saveImage:function() {
const that = this
wx.saveFile({
tempFilePath: this.data.tempFilePath,
success(res) {
that.setData({savedFilePath: res.savedFilePath})
wx.setStorageSync('savedFilePath', res.savedFilePath)
},
})
},
onLoad: function (options) {
this.setData({savedFilePath: wx.getStorageSync('savedFilePath')
})
},
模块化与引入模块
const formatTime = date => {const year = date.getFullYear() // 获取年
const month = date.getMonth() + 1 // 获取月份,月份数值需加 1
const day = date.getDate() // 获取一月中的某一天
const hour = date.getHours() // 获取小时
const minute = date.getMinutes() // 获取分钟
const second = date.getSeconds() // 获取秒
return [year, month, day].map(formatNumber).join('/') + ' ' +
[hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => { // 格式化数字
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime,
formatNumber: formatNumber
}
const util = require('../../utils/util.js')
微信领取
绑定微信领取商户号
callPay(){
wx.cloud.callFunction({
name: 'pay',
success: res => {console.log(res)
const payment = res.result.payment
wx.requestPayment({
...payment,
success (res) {console.log('领取胜利', res)
},
fail (err) {console.error('领取失败', err)
}
})
},
fail: console.error,
})
},
pay 云函数
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV})
exports.main = async (event, context) => {
const res = await cloud.cloudPay.unifiedOrder({
"body": "zzzzz",
"outTradeNo" : "1xxxxxxxxxx", // 不能反复,否则报错
"spbillCreateIp" : "127.0.0.1", // 就是这个值,不要改
"subMchId" : "xxxxxxxxxxx", // 你的商户 ID 或子商户 ID
"totalFee" : 100, // 单位为分
"envId": "xxxxxxxx", // 你的云开发环境 ID
"functionName": "paysuc",
"nonceStr":"fffffffffffffff", // 轻易弄的 32 位字符串,倡议本人生成
"tradeType":"JSAPI" // 默认是 JSAPI
})
return res
}
调用 cloudPay.queryOrder()
来查问订单的领取状态
调用 cloudPay.refund()
来对曾经领取胜利的订单发动退款
新建一个 queryorder 的云函数
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV,})
exports.main = async(event, context) => {
const res = await cloud.cloudPay.queryOrder({
"sub_mch_id":"xxxxxxxx",
"out_trade_no":"xxxxxxxxx", // 商户订单号,需是云领取胜利交易的订单号
// "transaction_id":"xxxxxxxxxxxxxxxxxxxxx", // 微信订单号能够不用写
"nonce_str":"xxxxxxxxxxxxxxxxxxxxxxx" // 任意的 32 位字符
})
return res
}
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV,})
exports.main = async(event, context) => {
const res = await cloud.cloudPay.refund({
"sub_mch_id":"xxxxxxxxxx",
"nonce_str":"xxxxxxxxxxxxxxxx",
"out_trade_no":"xxxxxxxxxxxxxx",// 商户订单号,需是云领取胜利交易的订单号
"out_refund_no":"xxxxxxxxxxxxxx",// 退款单号,能够自定义,倡议与订单号相关联
"total_fee":100,
"refund_fee":20,
})
return res
}
发订阅音讯,须要调用接口wx.requestSubscribeMessage
callPay(){
wx.cloud.callFunction({
name: 'pay',
success: res => {console.log(res)
const payment = res.result.payment
wx.requestPayment({
...payment,
success (res) {console.log('领取胜利', res)
this.subscribeMessage()},
})
},
})
},
subscribeMessage() {
wx.requestSubscribeMessage({
tmplIds: ["xxxxxx-xx-x",// 订阅音讯模板 ID],
success(res) {console.log("订阅音讯 API 调用胜利:",res)
},
fail(res) {console.log("订阅音讯 API 调用失败:",res)
}
})
},
主动回复文本音讯和链接
<button open-type="contact" > 进入客服 </button>
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV,})
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()
try {
const result = await cloud.openapi.customerServiceMessage.send({
touser: wxContext.OPENID,
msgtype: 'text',
text: {content: 'xxxxxxx'}
})
const result2 = await cloud.openapi.customerServiceMessage.send({
touser: wxContext.OPENID,
msgtype: 'text',
text: {content: 'xxxxx'}
})
return event
} catch (err) {console.log(err)
return err
}
}
主动回复链接
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV,})
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()
try {
const result = await cloud.openapi.customerServiceMessage.send({
touser: wxContext.OPENID,
msgtype: 'link',
link: {
title: 'xxxxxxx',
description: 'xxxxxx',
url: 'https://xxxxxxx 依据关键词来回复用户 t.com/',
thumbUrl: 'https://xxxxxxxm/love.png'
}
})
return event
} catch (err) {console.log(err)
return err
}
}
依据关键词来回复用户
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV,})
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()
const keyword = event.Content
try {if(keyword.search(/xxxx/i)!=-1){
const result = await cloud.openapi.customerServiceMessage.send({
touser: wxContext.OPENID,
msgtype: 'link',
link: {
title: 'xxxxx',
description: 'xxxxx',
url: 'https://xxx.com/',
thumbUrl: 'https://xxxx.png'
}
})
}
return event
} catch (err) {console.log(err)
return err
}
}
获取微信步数
getWeRunData(){
wx.getWeRunData({success: (result) => {console.log(result)
},
})
}
订阅音讯
subscribeMessage() {
wx.requestSubscribeMessage({
tmplIds: [
"xxxxxxxxxxxx",// 模板
"xxxxxxxxxxxx",
"xxxxxxxxxx
],
success(res) {console.log("订阅音讯 API 调用胜利:",res)
},
fail(res) {console.log("订阅音讯 API 调用失败:",res)
}
})
},
云开发登陆
查看是否登录
<script>
global.isLogin = function() {
try {var openid = uni.getStorageSync('openid');
} catch (e) { }
if (openid === '') {return false} else {
return {openid}
}
};
export default {onLaunch: function() {console.log('App Launch')
wx.cloud.init({traceUser: true});
}
}
</script>
登陆页面
<template>
<view>
<!-- #ifdef MP-WEIXIN -->
<button class='bottom' type='primary' open-type="getUserInfo"
withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
受权登录
</button>
<!-- #endif -->
</view>
</template>
<script>
const db = wx.cloud.database();
export default {data() {return {}
},
methods: {wxGetUserInfo(msg) {console.log(msg)
var that = this;
if (!msg.detail.iv) {
uni.showToast({
title: '您勾销了受权,登录失败',
icon: 'none'
});
return false
}
uni.showLoading({title: '加载中'});
uni.login({
provider: 'weixin',
success: function(loginRes) {console.log(loginRes)
that.getOpenid(msg);
},
fail: function(r) {console.log(r)
}
})
},
getOpenid(msg) {
var that = this;
wx.cloud.callFunction({
name: 'getOpenid',
complete: res => {console.log('openid:', res);
try {uni.setStorageSync('openid', res.result.openId);
} catch (e) { }
that.saveToDb(msg, res.result.openId)
},
});
},
saveToDb(msg, openid) {console.log(openid)
db.collection('user').where({_openid: openid}).get().then(res => {console.log(res)
if (res.errMsg === 'collection.get:ok') {if (res.data.length === 0) {db.collection('user').add({
data: {
...msg.detail.userInfo,
_openid: res.result.openId
}
}).then(res => {console.log(res);
});
}
uni.hideLoading();
uni.showToast({
title: '受权胜利',
icon: 'success'
});
setTimeout(() => {uni.navigateBack();
}, 1500);
} else {}})
}
},
onLoad() {}
}
</script>
总结
以上就是明天要讲的内容,本文仅仅简略介绍了小程序开发 - 云开发技术总结,感激浏览,如果你感觉这篇文章对你有帮忙的话,也欢送把它分享给更多的敌人。感激转发分享,点赞,珍藏哦!