一、weui组件库
一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一。
1.安装
1.1 npm 安装
安装步骤及使用:
1.npm init -y 生成package.json文件
2.npm install weui-miniprogram 安装weui库
3.点击菜单栏-工具-构建npm
4.点击设置-勾选使用npm模块
5.使用
在app.wxss中引入全局样式
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
在json文件中进行组件注册
{
"usingComponents": {
"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
}
}
在wxml文件中使用
<mp-dialog></mp-dialog>
缺点:包会算到总工程的大小中
1.2拓展库的形式(推荐)
安装步骤及使用:
1.app.json
"useExtendedLib":{
"weui":true
}
2.在json文件中进行组件注册
{
"usingComponents": {
//路径前边 比文档上多了一层目录,注意注意
"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
}
}
3.在wxml文件中使用
<mp-dialog></mp-dialog>
二、分包加载
1.概述
某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。每个使用分包小程序必定含有一个主包。
主包:
放置默认启动页面、tabbar页面,以及公共的一些资源、js脚本
分包:
普通分包:普通的文件夹,依赖于主包
独立分包:不依赖于主包的独立模块
2.优势
1.在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。
2.单个分包/主包大小不能超过 2M,整个小程序所有分包大小不超过 20M,能够将工程大小扩充到20M
3.对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。
3.配置分包结构
app.json
"subpackages": [{
"root": "packageA", // a分包的根路径
"pages": [
"cat/cat",
"dog/dog"
]
}, {
"root": "packageB", // b分包的根路径
"pages": [ // b分包下的页面路径
"apple/apple"
]
}]
4.独立分包
app.json
{
"root": "packageB",
"pages": [
"apple/apple",
"banana/banana"
],
"independent": true //设置独立分包
}
问题:在独立分包获取 app实例
// 直接打开独立分包 的问题:
// 默认是拿不到app,
// 想获取到app实例,{allowDefault:true},但是获取的{},只能在对象里添加值
let app = getApp({allowDefault:true})
app.name="赵四"
console.log(app);
console.log('b-apple');
三、开放能力
api
1.授权
1.1概述
微信获取用户信息、保存照片或者视频到手机相册!! 需要用户主动点击同意进行授权
部分接口需要同意之后才能使用接口
1.2进行授权
提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口。如果用户之前已经同意授权,则不会出现弹窗,直接返回成功
授权方式
wx.authorize({
scope:""
})
授权有效期
一旦用户明确同意或拒绝过授权,其授权关系会记录在后台,直到用户主动删除小程序。
1.3检测授权
代码案例:
wx.getSetting({})
// 1.检测授权信息
wx.getSetting({
success(res){
console.log(res);
if(res.authSetting['scope.userInfo']){
// 已经授权
wx.getUserInfo({
success(res){
console.log(res);
}
})
}else{
// 特殊性:获取用户,不能直接wx.authorize发起授权请求,需要借助按钮
wx.showToast({
title: '点击按钮进行授权',
icon:"none"
})
// 其他接口,发起授权,弹窗询问
// wx.authorize({
// scope:"scope.record"
// })
}
}
})
2.获取用户信息
更新之前,借助按钮+open-type=“getUserInfo” 发起授权
授权后 wx.getUserInfo
更新 借助按钮+普通事件,事件内调用新的接口wx.getUserProfile()
2.1进行授权
代码案例:
<button open-type="getUserInfo" bindgetuserinfo="_login">获取用户信息</button>
<button bindtap="get">用户信息-更新</button>
2.2button形式获取用户
bindgetuserinfo
_login(e){
console.log(e);
if(e.detail.errMsg=="getUserInfo:fail auth deny"){
wx.showToast({
title: '授权之后体验更好',
})
}
},
2.3 api的形式获取
前提:已经授权
代码案例:
// 1.检测授权信息
wx.getSetting({
success(res){
console.log(res);
if(res.authSetting['scope.userInfo']){
// 已经授权 api
wx.getUserInfo({
success(res){
console.log(res);
}
})
}else{
// 特殊性:获取用户,不能直接wx.authorize发起授权请求,需要借助按钮
wx.showToast({
title: '点击按钮进行授权',
icon:"none"
})
3.wx.login 微信登录
不是做登录操作,
wx.login 获取code 登录凭证
=》发送给后台 后台返回 openid 用户在当前小程序的唯一标识, session_key 会话秘钥
3.1登录流程
代码案例:
// 检测微信登录是否有效
wx.checkSession({
success: (res) => {
// 登录有效
},
fail:(err)=>{
// 登录失效,还没登录
// 重新登录
wx.login({
success(res){
console.log(res);
// 发起请求
wx.request({
url: '后台的接口',
data:{
code:res.code
},
success(result){
//用户唯一标识 登录态信息
}
})
}
})
}
})
四、云开发
1.云开发概述
传统开发模式
小程序(前端) + 后端服务(java,php,node) + 服务器 + 数据库 + 域名
云开发开发模式
弱化了后端的概念,前端可以直接调用api去操作数据等
小程序(前端) + api + 云开发(云函数,数据库,云存储) 免费的
2.开通云开发服务
点击云开发
预支付--免费的0元
3.创建云开发项目
同普通的小程序创建项目步骤一样的,但是勾选上使用云开发
appid必须是真实的
4.云能力初始化
数据库 云函数 云存储
wx.cloud.init({ env: })
//app.js
App({
onLaunch: function () {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
//1、云能力初始化
wx.cloud.init({
// env 参数说明:
// env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
// 如不填则使用默认环境(第一个创建的环境)
env: 'dev-wmunf',
traceUser: true,
})
}
this.globalData = {}
}
})
5.数据库的操作
数据库初始化
(1)添加数据
代码案例:
_add(){
let {name,age} = this.data
// console.log(name,age);
// 数据库添加数据
// 1.获取数据的引用
let db = wx.cloud.database()
// 2.集合名称
db.collection('a-test')
.add({
data:{
username:name,
userage:age
},
success:(res)=>{
// _id 数据的唯一标识
console.log(res);
if(res._id){
wx.showToast({
title: '添加成功',
})
this.setData({
name:"",
age:""
})
}
}
})
}
(2)查询
代码案例:
1)通过where查询
传入一个对象 指定查询条件,
==小程序端不能超过 20 条 ==
_getByWhere(){
// where 传入一个对象({})
let where={
// "userage":'12'
}
db.collection('a-test').where(where).get().then(res=>{
console.log(res);
this.setData({
list:res.data
})
})
},
2)通过doc查询
_id 数据的唯一标识
// 查询一条数据
_getByDoc(e){
let id = e.currentTarget.dataset.id;
db.collection('a-test').doc(id).get({
success:res=>{
console.log(res);
}
})
},
(3)删除
1)通过where查询
where(where).remove() 传入一个对象{}
== 目前小程序端只能删除一条数据 ==
// 删除多条数据
_removeByWhere(){
// 目前 小程序端只能删除一条数据 ,
// 删除多条数据 只能通过云函数端删除
let where= {
userage:"40"
}
db.collection('a-test').where(where).remove()
.then(res=>{
console.log(res);
})
},
2)通过id删除
doc(_id).remove()
// 删除一条数据
_removeByDoc(e){
// doc(_id).remove()
let id = e.currentTarget.dataset.id
db.collection('a-test').doc(id).remove()
.then(res=>{
console.log(res);
if(res.stats.removed == 1){
wx.showToast({
title: '删除成功',
})
this._getByWhere()
}
})
},
(4)修改
代码案例:
_updateByDoc(e){
let id = e.currentTarget.dataset.id
db.collection('a-test').doc(id).update({
data:{
userage:"20"
}
})
.then(res=>{
console.log(res);
if(res.stats.updated == 1){
wx.showToast({
title: '修改成功',
})
this._getByWhere()
}
})
},
_updateByWhere(){
let where = {
userage:'20'
}
// update部分更新
db.collection('a-test').where(where).update({
data:{
userage:"30",
sex:1
}
}).then(res=>{
console.log(res);
})
},
6.云函数的操作
操作步骤:
1)找到cloudfunctions文件夹,右键新建node。js云函数 remove
2)找到云函数文件夹,右键--选择 上传并部署
3)注意:每次修改云函数 本地代码 修改完成后,重新部署
删除多条数据 案例:
1.云函数端:
每次修改云函数 本地代码 修改完成后,重新部署
// 云函数入口文件
const cloud = require('wx-server-sdk')
// 云函数端 初始化
cloud.init({env:"dev-wmunf"})
// 数据库 初始化
let db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
// event 传入的参数
// 云端删除多条
// let where={
// userage:"20"
// }
return db.collection(event.collection).where(event.where).remove()
}
2.小程序端:
_removeByCloud(){
// 小程序端调用云函数
wx.cloud.callFunction({
name:"remove",
data:{
collection:"a-test",
where:{
userage:"30"
}
}
})
.then(res=>{
console.log(res);
if(res.result.stats.removed>0){
wx.showToast({
title: '删除成功',
})
}
})
},
7.存储的操作
7.1上传
(1)图片选择
代码案例:
// 1.选择图片
_chooseImage(){
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success:(res)=> {
console.log(res);
// tempFilePath可以作为img标签的src属性显示图片
this.setData({
img:res.tempFilePaths[0]
})
}
})
},
(2)上传文件及插入数据库
代码案例:
// 文件上传以及数据库添加
_addCloud(){
let {name,age} = this.data
// 2.上传到云端
// 处理云端的路径
// 后缀名 xxx.jpg http.xx.png
let extName = this.data.img.split('.').pop()
// console.log(extName);
let cloudPath = "web1102/"+new Date().getTime() + "." + extName
wx.cloud.uploadFile({
// 指定上传到的云路径
cloudPath,
// 指定要上传的文件的小程序临时文件路径
filePath: this.data.img,
success: res => {
// console.log('上传成功', res)
let fileID = res.fileID //云存储端的 文件唯一标识 fileID
// 3.执行数据 添加
db.collection('a-test').add({
data:{
username:name,
userage:age,
fileID
},
success:(reslut)=>{
// _id
console.log(reslut);
if(reslut._id){
wx.showToast({
title: '添加成功',
})
this.setData({
name:"",
age:"",
img:""
})
this._getByWhere()
}
}
})
},
})
},
7.2下载
代码案例:
// 下载云端 图片 到本地
_download(e){
let fileid = e.currentTarget.dataset.fileid
wx.cloud.downloadFile({
fileID:fileid,
success:res=>{
console.log(res);
//保存图片
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(){
}
})
}
})
},
7.3删除
代码案例:
// 删除 带服务端图片地址
_delByCloud(e) {
let fileid = e.currentTarget.dataset.fileid;
let id = e.currentTarget.dataset.id
//云端删除
wx.cloud.deleteFile({
fileList: [fileid],//要删除的文件fileID
success: res => {
console.log(res.fileList)
// ========补充======== 数据库 执行删除
db.collection('a-test').doc(id).remove().then(result => {
// console.log(result);
if (result.stats.removed == 1) {
wx.showToast({
title: "删除成功"
})
this._getByWhere()
}
})
},
fail: console.error
})
}
云开发案例:
wxml:
<!--index.wxml-->
<input type="text" model:value="{{name}}" />
<input type="text" model:value="{{age}}" />
<image src="{{img}}" ></image>
<button bindtap="_chooseImage">选择图片</button>
<button bindtap="_addCloud">添加-云文件上传</button>
<button bindtap="_add">添加</button>
<button bindtap="_getByWhere">获取</button>
<button bindtap="_updateByWhere">修改</button>
<button bindtap="_removeByWhere">删除</button>
<button bindtap="_removeByCloud">云函数删除多条</button>
<view wx:for="{{list}}">
{{item.username}}--{{item.userage}}
<image src="{{item.fileID}}" data-fileid="{{item.fileID}}" bindlongpress="_download"></image>
<button size="mini" type="primary" data-id="{{item._id}}" bindtap="_getByDoc">详情</button>
<button size="mini" type="warn" data-id="{{item._id}}" bindtap="_removeByDoc">删除</button>
<button size="mini" type="warn" data-id="{{item._id}}" bindtap="_updateByDoc">修改</button>
<button size="mini" type="warn" data-id="{{item._id}}" data-fileid="{{item.fileID}}" bindtap="_delByCloud">删除-云文件删除</button>
</view>