- 云开发新能力,支持 HTTP 调用 API
今天来上班打开电脑,总感觉微信开发文档哪里有点不太一样,研究了半天原来是云开发又多了神级功能——HTTP API! HTTP API是什么?简单来说就是通过云开发HTTP API,可以不需要通过微信小程序或云开发控制台,就能够管理云开发能力。 技能一 花式触发云函数 在此之前,云函数只能通过微信小程序、定时触发器或其他云函数触发。借助HTTP API,可以在微信小程序环境外随时触发云函数啦! 但是,需要注意的是:HTTP API 途径触发云函数不包含用户信息。 请求地址 [代码]POST https://api.weixin.qq.com/tcb/invokecloudfunction?access_token=ACCESS_TOKEN&env=ENV&name=FUNCTION_NAME [代码] 请求参数 [图片] Tips 1.使用本API触发云函数,在云函数中无法获取OpenID等用户相关信息,无法使用涉及用户登录态的其他API。 2.注意 POST BODY 部分会传递给云函数作为输入参数。 3.由 HTTP API 触发的云函数可以使用云调用。 4.由 HTTP API 触发云函数的超时时间为5s,请注意云函数的执行时间不能过长。 技能二 数据库导入导出 近期有很多小伙伴问我们,为什么数据只能通过云开发控制台手动导出?太麻烦啦!这不,在开发哥哥的不懈努力下,支持通过API导入导出数据啦! 数据库导入 请求地址 [代码]POST https://api.weixin.qq.com/tcb/databasemigrateimport?access_token=ACCESS_TOKEN [代码] 请求参数 [图片] 数据库导出 请求地址 POST https : //api.weixin.qq.com/tcb/databasemigrateexport?access_token=ACCESS_TOKEN 请求参数 [图片] 技能三 管理云存储文件 现在可以便捷地在小程序前端快速实现文件上传/下载及管理功能,同时也可以在开发者工具「云开发」控制台内进行管理。 获取文件上传链接 请求地址 [代码]POST https://api.weixin.qq.com/tcb/uploadfile?access_token=ACCESS_TOKEN [代码] 请求参数 [图片] 获取文件下载链接 请求地址 [代码]POST https://api.weixin.qq.com/tcb/batchdownloadfile?access_token=ACCESS_TOKEN [代码] 请求参数 [图片] 删除文件 请求地址 [代码]POST https://api.weixin.qq.com/tcb/batchdeletefile?access_token=ACCESS_TOKEN [代码] 如要详细了解,点击"https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/"查阅《小程序·云开发文档》 [图片] 如果你有关于使用云开发CloudBase相关的技术故事/技术实战经验想要跟大家分享,欢迎留言联系我们哦~比心!
2019-07-24 - 云函数基于云存储的 读写文本文件
云函数的空间不允许写文件的 这用起来 很麻烦的 有的时候需要读写文件的 。所以分享下基于云存储的 读写文本文件 // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函数入口函数 exports.main = async(event, context) => { let buffer = new Buffer("我是谁 我来自哪里 我要干啥", "utf-8"); //上传文件 const upload = await cloud.uploadFile({ cloudPath: 'testTxt.txt', fileContent: buffer, }) //读取文件 const res = await cloud.downloadFile({ fileID: upload.fileID }); //获取文件内容 const d_buffer = res.fileContent; return { upload, //文件内容转utf8 txt: d_buffer.toString('utf8') }; }
2018-11-05 - scroll-view里面显示表格
[图片] 这是一个用scroll-view里面用view设计的表格,希望第一列能垂直居中,研究了好多天,就是没结果
2019-02-08 - 新富文本组件
mp-html小程序富文本组件 news欢迎加入 QQ 交流群:699734691示例小程序添加获取组件包功能[图片] 功能介绍 支持在多个平台使用 支持丰富的标签(包括 table、video、svg 等) 支持丰富的事件效果(自动预览图片、链接处理等) 支持锚点跳转、长按复制等丰富功能 支持大部分 html 实体 丰富的插件(关键词搜索、内容编辑等) 效率高、容错性强且轻量化使用方法1. npm 方式 在项目根目录下执行 npm install mp-html 开发者工具中勾选 使用 npm 模块 并点击 工具 - 构建 npm 在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "mp-html" } } 在需要使用页面的 wxml 文件中添加 <mp-html content="{{html}}" /> 在需要使用页面的 js 文件中添加 Page({ onLoad() { this.setData({ html: 'Hello World!' }) } }) 2. 源码方式 将源码中的代码包(dist/mp-weixin)拷贝到 components 目录下,更名为 mp-html 在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "/components/mp-html/index" } } 后续步骤同上 获取github 链接:https://github.com/jin-yufeng/mp-html npm 链接:https://www.npmjs.com/package/mp-html 文档链接:https://jin-yufeng.gitee.io/mp-html
2022-03-04 - 微信小程序分页加载数据~上拉加载更多~小程序云数据库的分页加载
我们在开发小程序时,一个列表里难免会有很多条数据,比如我们一个列表有1000条数据,我们一下加载出来,而不做分页,将会严重影响性能。所以这一节,我们来讲讲小程序分页加载数据的实现。 老规矩,先看效果图 [图片] 可以看到我们每页显示10条数据,当滑动到底部时,会加载第二页的数据,再往下滑动,就加载第三页的数据。由于我们一共21条数据,所以第三页加载完以后,会有一个“已加载全部数据”的提示。 本节知识点 1,小程序分页加载 2,小程序列表显示 3,云数据库的使用 4,云数据库分页请求数据的实现 一,先定义数据 我们做分页数据加载,肯定要先准备好数据,数据已经给大家准备好,如下图,文章末尾会贴出数据源和本节课源码的下载地址。 [图片] 然后把数据导入到我们的云开发的数据库里,关于数据如何导入,这里不再讲解,不知道的同学,请看下面这篇文章。或者去老师历史文章里找一下。 《小程序云开发入门—云数据库数据源的导入与导出》 下面给大家看下我们的数据源,长什么样。其实很简单,就是简单的定义21条数据。 [图片] 然后在看导入到数据库的样子。 [图片] 二,分页请求数据 我们第一步准备好了数据以后,接下来就来讲讲如何在js里做分页加载数据。 首先我们这里用到了小程序云开发数据库的知识点 1,get方法:获取云数据库数据 2,skip方法:跳过前面几条数据,请求后面的数据 3,limit方法:请求多少条数据。 比如下面这段代码,就是跳过前5条,请求从第6条开始往后的10条数据,就是请求6~15的数据,我们做分页加载也就是基于这个原理。 [代码] wx.cloud.database().collection("list") .skip(5) //从第几个数据开始 .limit(10) [代码] 下面把我们index.js的完整代码贴给大家。 [代码]//老师微信:2501902696 let currentPage = 0 // 当前第几页,0代表第一页 let pageSize = 10 //每页显示多少数据 Page({ data: { dataList: [], //放置返回数据的数组 loadMore: false, //"上拉加载"的变量,默认false,隐藏 loadAll: false //“没有数据”的变量,默认false,隐藏 }, //页面显示的事件 onShow() { this.getData() }, //页面上拉触底事件的处理函数 onReachBottom: function() { console.log("上拉触底事件") let that = this if (!that.data.loadMore) { that.setData({ loadMore: true, //加载中 loadAll: false //是否加载完所有数据 }); //加载更多,这里做下延时加载 setTimeout(function() { that.getData() }, 2000) } }, //访问网络,请求数据 getData() { let that = this; //第一次加载数据 if (currentPage == 1) { this.setData({ loadMore: true, //把"上拉加载"的变量设为true,显示 loadAll: false //把“没有数据”设为false,隐藏 }) } //云数据的请求 wx.cloud.database().collection("list") .skip(currentPage * pageSize) //从第几个数据开始 .limit(pageSize) .get({ success(res) { if (res.data && res.data.length > 0) { console.log("请求成功", res.data) currentPage++ //把新请求到的数据添加到dataList里 let list = that.data.dataList.concat(res.data) that.setData({ dataList: list, //获取数据数组 loadMore: false //把"上拉加载"的变量设为false,显示 }); if (res.data.length < pageSize) { that.setData({ loadMore: false, //隐藏加载中。。 loadAll: true //所有数据都加载完了 }); } } else { that.setData({ loadAll: true, //把“没有数据”设为true,显示 loadMore: false //把"上拉加载"的变量设为false,隐藏 }); } }, fail(res) { console.log("请求失败", res) that.setData({ loadAll: false, loadMore: false }); } }) }, }) [代码] 上面的代码就是我们实现分页加载的所有逻辑代码。简单说下代码 1,我们首先进页面时会请求前10条内容 2,10条内容请求成功以后,我们会把请求到的内容加入dataList数组,然后把dataList里的数据显示到页面上。并将currentPage加一,用于请求第二页数据。 3,当用户滑动到底部时,会触发onReachBottom事件,在这个事件里做第二页到请求。然后第二页数据请求成功以后。继续将currentPage加1,这里要记住一定,一定要请求成功以后才将currentPage +1。 三,列表布局和样式 其实index.wxml和index.wxss的代码很简单,给大家把代码贴出来。 1,index.wxml [代码]<scroll-view scroll-y="true" bindscrolltolower="searchScrollLower"> <view class="result-item" wx:for="{{dataList}}" wx:key="item"> <text class="title">{{item.content}}</text> </view> <view class="loading" hidden="{{!loadMore}}">正在载入更多...</view> <view class="loading" hidden="{{!loadAll}}">已加载全部</view> </scroll-view> [代码] 2,index.wxss [代码]page { display: flex; flex-direction: column; height: 100%; } .result-item { display: flex; flex-direction: column; padding: 20rpx 0 20rpx 110rpx; overflow: hidden; border-bottom: 2rpx solid #e5e5e5; } .title { height: 110rpx; } .loading { position: relative; bottom: 5rpx; padding: 10rpx; text-align: center; } [代码] 到这里我们就完整的实现里分页加载功能了。 [图片] 源码和数据源,已经给大家放到网盘里了,有需要的同学请在文章底部留言,或者私信老师。 视频讲解:https://edu.csdn.net/course/detail/9604
2019-11-07 - 云开发http请求的两种写法
对于简单的GET表单请求 可以直接将参数封装在url中 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') var request = require('request') // 云函数入口函数 exports.main = async (event, context) => { //qz return new Promise((resolve, reject) => { request({ url: event.URL, method: "POST",//GET json: true, headers: { "content-type": "application/json", "token": event.token }, }, function (error, response, body) { if (!error && response.statusCode == 200) { try { resolve(body) } catch (e) { reject() } } }) }) } [代码] 对于POST请求 参数不好封装的 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') var request = require('request') cloud.init() // 云函数入口函数 exports.main = async (event, context) => { //这里写普通话成绩查询方式 return new Promise((resolve, reject) => { request({ url: event.url, method: "POST", json: true, headers: { "content-type": "application/json", "token":event.token }, body: event.body }, function (error, response, body) { if (!error && response.statusCode == 200) { try { resolve(body) } catch (e) { reject() } } }) }) } [代码] body中填写需要的参数 body是json形式 [代码]{ xxx:xxx } [代码] 请求头可以根据自己的需要进行修改。
2019-05-28 - 小程序显示H5网页教程
一、介绍 小程序里显示Html代码,目前插件(wxParse 解析html)解析支持不太好,有时候格式还是达不到预想的效果。 小程序里的HTML语法有点不好用, 最好的解决方案是直接在里面显示HTML页面,使用小程序的web-view组件。 之前由于需要验证原因,很多人把Bmob的素材页面填写到微信的业务域名,提示: 小程序设置web-view业务域名,解决“不支持打开非业务域名,请重新配置” 这个提示的根本原因,是没有成功设置业务域名。次次开放业务域名设置。大家可以上传静态HTML文件到自己应用。 二、设置业务域名前要做的准备 1.备案的域名 (如果有自己备案的域名,可以提交工单绑定自己域名,没有Bmob后端可以开通一个应用私人域名) 2.FTP 上传工具(这里大家通过Bmob后台素材生成HTML,或自己编写的代码工具都可以)当然FTP会更方便管理这些文件。 三、设置 1.登陆微信小程序控制台,进入设置-》开发设置-》业务域名(这里注意,目前只有企业资质也有这个设置) [图片] 2.点击设置,注意这里需要管理员扫描 下载这个效验文件到电脑,目前格式是txt。传入到自己私人域名 [图片] 3.上传到自己应用文件域名下 [图片] 4.检查是否正确 上传成功后,点击保存。完成设置 四、显示HTML 示例代码 [图片] https://mp.weixin.qq.com/ 是你的HTML地址。 数据库查询标题,列表也点击开这个URL。 例如Bmob的图文素材表,都会有个HTML,大家可以把这个地址填入web-view 这样就完美的解决了小程序显示HTML代码错乱问题。 欢迎加Bmob官方Q群探讨:586487943
2019-04-23