一、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']){// 已经授权 apiwx.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.iddb.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.iddb.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云函数 remove2）找到云函数文件夹，右键--选择 上传并部署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.pnglet extName = this.data.img.split('.').pop()// console.log(extName);let cloudPath = "web1102/"+new Date().getTime() + "." + extNamewx.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)=>{// _idconsole.log(reslut);if(reslut._id){wx.showToast({title: '添加成功',})this.setData({name:"",age:"",img:""})this._getByWhere()}}})},})},

7.2下载

代码案例：

// 下载云端 图片 到本地_download(e){let fileid = e.currentTarget.dataset.fileidwx.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],//要删除的文件fileIDsuccess: 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>

weui组件库、分包加载、开放能力、云开发相关推荐

云开发、自定义组件、分包加载、基础库兼容问题、骨架屏使用
一.云开发基本使用(了解) 1.环境初始化开发前需要在小程序端选择好相应的云环境,一般在小程序的app.js文件中进行处理 onLaunch: function () {if (!wx.cloud) ...
微信小程序开发（三）：分包加载
微信小程序分包加载小程序开发完成后,开发者需要将代码包上传到小程序管理后台上线,这时候我们会发现,小程序后台对开发者上传的代码包有严格的大小要求:本地代码超过2M就会限制上传. 目前小程序分包大小有 ...
微信小程序之分包加载，解决代码超过2M的方法
2017.01.09 小程序上线时,微信限制了代码包不能超过1MB 大小,(现在是2M了)限制大小是出于对小程序启动速度的考虑,希望用户在使用任何一款小程序时,都能获得一种"秒开" ...
如何利用微信小游戏的分包加载机制突破4M代码包体积限制
相信大家度过了一个不错的端午假期,在端午前夕,即6月15日晚上,微信小游戏宣布支持分包加载功能,白鹭引擎在端午节后第一天正式支持分包加载机制.在正式向开发者介绍如何使用前,我先为各位解读一下我对微信提 ...
微信小游戏开发（9）- 分包加载
随着小游戏的玩法越来越丰富,开发者对于扩大包大小的需求越来越强烈,所以微信推出了小游戏分包加载这一个功能. 所谓的分包加载,即把游戏内容按照一定的规则拆分成几个包,在首次启动时先下载必要的包,这个必要 ...
小程序代码超出2M怎么办？如何使用分包加载？
版本不断迭代后,发现小程序的程序包越来越大,马上就要面临2M的临界了,最近又涉及另一个版本的迭代,网上找了一下,发现小程序可以使用分包加载的方法,让小程序即便超过了2M也能继续跑. 不过小程序只在微信 ...
微信小程序分包加载，分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
把共享库(SO)加载到指定的内存地址
一位朋友最近遇到一个棘手的问题,希望把共享库(SO)加载到指定的内存地址,目的可能是想通过prelink来加快应用程序的起动速度.他问我有没有什么方法.我知道Windows下是可以的,比如在VC6里设 ...
【已解决】wepy中使用分包加载报错
问题: "xxx.js 出现脚本错误后者未正确调用Page()" 最近看小程序启动时间(性能监控),启动时间比较长,所以考虑使用分包加载. 但在使用过程中遇到" ...

weui组件库、分包加载、开放能力、云开发

一、weui组件库

1.安装

1.1 npm 安装

1.2拓展库的形式（推荐）

二、分包加载

1.概述

2.优势

3.配置分包结构

4.独立分包

三、开放能力

1.授权

1.1概述

1.2进行授权

1.3检测授权

2.获取用户信息

2.1进行授权

2.2button形式获取用户

2.3 api的形式获取

3.wx.login 微信登录

3.1登录流程

四、云开发

1.云开发概述

2.开通云开发服务

3.创建云开发项目

4.云能力初始化

5.数据库的操作

（1）添加数据

（2）查询

（3）删除

1）通过where查询

2）通过id删除

（4）修改

6.云函数的操作

1.云函数端：

2.小程序端：

7.存储的操作

7.1上传

（1）图片选择

（2）上传文件及插入数据库

7.2下载

7.3删除

weui组件库、分包加载、开放能力、云开发相关推荐

最新文章

热门文章