拼图式网站开发,大港做网站公司,网页的后台管理系统,儿童摄影设计微信小程序研发问题梳理
最近鼓捣小程序的时候#xff0c;着实遇到了一些问题#xff0c;尽管有些再翻看文档几遍#xff0c;就能找到答案#xff0c;但还是要发挥下烂笔头的功效#xff0c;顺便梳理下。
问题列表
登录流程小程序标签页地址无法跳转问题页面翻页内容加…微信小程序研发问题梳理
最近鼓捣小程序的时候着实遇到了一些问题尽管有些再翻看文档几遍就能找到答案但还是要发挥下烂笔头的功效顺便梳理下。
问题列表
登录流程小程序标签页地址无法跳转问题页面翻页内容加载问题页面下拉无法触发的问题小程序本地缓存的使用Canvas制图横向滚动富文本内容无法解析小程序分享功能
1.登录流程 通过小程序登录时获取的 code 和 appid 及 secret 请求微信开放接口 sns/jscode2session 获取登录校验信息(session-key|unionid) 只简单举例微信小程序开发文档上有具体说明 wx.login({success: res {// 发送 res.code 到后台换取 openId, sessionKey, unionIdthis.getLoginInfoByCode(res.code);}})//用code获取登录session-key
getLoginInfoByCode: function (code){var that this;wx.request({url: https://wx.xxx.com/api/wx/user/getLoginCode,method: POST,data:{code: code},success: function(dta){if (dta.data) {var dt dta.data;// console.log(dt);// console.log(openid: dt.data.openid);// console.log(session_key: dt.data.session_key);}}})},//通过session-key和小程序附加信息获取用户信息
getUserInfoBySessKey: function (param) {wx.getUserInfo({success: res {// 可以将 res 发送给后台解码出 unionIdwx.request({url: https://wx.xxx.com/api/wx/user/saveUserData,method: POST,data: {encryptedData: res.encryptedData,sessionKey: param.session_key,iv: res.iv,openid: param.openid},success: function (dt) {// console.log(detail:);// console.log(dt.data);}})// 由于 getUserInfo 是网络请求可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}注1此处的参数在后台获取时过滤参数验证需要谨慎最好先实验通过后再过滤。比如配置后台验证服务器环境时
注2所有api.weixin.com的接口请求都要打缓存。
注3确保小程序的js没有报错不然会有接口请求不到数据的情况 2.小程序标签页地址无法跳转问题 也是从网上前辈们处得知页面内的跳转地址如果和标签栏里的地址一样那么是不生效的需要更换地址。 //app.json
{pages: [pages/index,],tabBar: {list : [{pagePath : pages/index,text : 首页,}]},debug: true
}!-- pages: index --
navigator url/pages/index hover-classnavigator-hover/navigator我的处理方式是本办法将目标页面copy到一个新目录换个地址路径
!-- pages:detail --
navigator url/pages/detail hover-classnavigator-hover/navigator3.页面翻页内容加载问题 后加载到页面的内容需要堆积到之前的变量里。 getList: function () {var that this;if (bPageSum curPage curPage ! 1) {return false;}wx.request({url: https://wx.xxx.com/api/wx/area,data: {startDate: that.data.startDate,endDate: that.data.endDate,page: curPage,pageSize: pageSize,},header: {content-type: application/json},success: function (dt) {curPage curPage 1;bTotal dt.data.total;bPageSum dt.data.pageSum;//堆积var len dt.data.list.length;for (var i 0; i len; i) {bAllList.push(dt.data.list[i]);}//页面初始化时的变量that.setData({list: bAllList});}})},这里如果有好的方法欢迎留言 4.页面下拉无法触发的问题 要在应用页面 pages/index.json 里开启配置 //pages: index.json{navigationBarTitleText: 首页,enablePullDownRefresh: true
}//pages: index.js/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {...wx.stopPullDownRefresh();},5.小程序本地缓存的使用 在用户驻留时间较长的时候会对接口请求后的数据加本地缓存减少请求。 //pages: index.jsgetInfo: function () {var that this;wx.request({url: https://wx.xxx.com/api/wx/info,method: POST,dataType: json,data: {date: that.data.curDate},header: {content-type: application/json},success: function (dt) {//将结果打入本地缓存wx.setStorage({key: wx_ that.data.curDate,data: dt.data});that.logic(dt);}})},//.../** * 清除本地缓存*/clearCache: function (){wx.removeStorage({key: wx_this.data.curDate,success: function (res) {return true;}}) },//.../*** 生命周期函数--监听页面显示*/onShow: function() {//同步本地缓存var dt wx.getStorageSync(k);that.logic(dt);},6.Canvas制图横向滚动
参考资料 微信小程序canvas超出屏幕实现左右滑动的方法
方案一
将绘制出的canvas 保存为本地路径的一个img 路径.然后将图片放到 scroll-view 里面,进行滑动.
!-- wxml --
scroll-view classtemp_day_box scroll-xview classcanvas_heightimage classcanvas_img src{{canvasSaveimg}}/image/view
/scroll-view
canvas canvas-idcanvasWeather classcanvasHigh/canvas/* wxss */
.canvasHigh {width: 2250rpx;height: 270rpx;transform: translateX(-200%);
}
.canvas_img{width: 2250rpx;height: 270rpx;
}[注] 这里的canvasHigh的css属性可以用很多其他的方式隐藏,但是这里注意的是一定不能用display:none;或者 标签里面加hidden,wx:if属性,这样保存下来的图片路径是不会显示出来的.
/* js */
//前面的写法这里就不再编写,可以查看相关文档和官方api
ctx.draw();
wx.canvasToTempFilePath({canvasId: canvasWeather,//canvasId和标签里面的id对应success: (res) {var shareTempFilePath res.tempFilePath;_this.setData({//将获取到的图片临时路径set到canvasSaveimg中canvasSaveimg:shareTempFilePath})}
})方案二
在scroll-view标签中绑定一个滚动时触发的事件,这里就不需要保存为图片,但是动画效果有点小小的僵硬.
!-- wxml --
scroll-view classtemp_day_box scroll-x bindscrollscrollCanvas view classcanvas_height styletransform: translateX(-{{canvasLen}}px);canvas canvas-idcanvasWeather classcanvasHigh/canvas /view
/scroll-view/* js */
scrollCanvas: function(e) {console.log(e);var canvasLen e.detail.scrollLeft;this.setData({canvasLen: canvasLen})
}7. 富文本内容无法解析
在抓取数据展示或者后台添加了富文本内容要通过变量展示到页面时会出现内容源码出现在页面html标签没有被解析的情况推荐使用WXParse插件 插件资源 github-wxParse 应用实例 下载资源将wxParse目录copy至pages同级
① 引入插件js脚本
// js//引入插件JS脚本
var WxParse require(../../wxParse/wxParse.js);Page({data: {aid : },/*** 根据文章ID获取资讯**/getArticleInfo: function () {var that this;wx.request({url: https://wx.xxx.com/api/wx/getInfo,data: {aid: that.data.aid},header: {content-type: application/json},success: function (dt) {//插件实例var article dt.data.content;WxParse.wxParse(article, html, article, that, 5);}})}}② 引入插件模板
!-- wxml --!-- 引入插件模板 --
import src../../wxParse/wxParse.wxml/view classblockview classcontent!-- 文章内容START --view classcontent-texttemplate iswxParse data{{wxParseData:article.nodes}}//view!-- 文章内容END --/view/view③ 引入插件样式
/* wxss *//* 引入插件样式 */
import ../../wxParse/wxParse.wxss;这样就可以展示了。大概的原理将富文本内容通过js解析节点内容再加载到页面。 可能会遇到的问题 Error: html.replace is no a funciton ...i. 找到wxParse/html2json.js 文件将其中的 console.dir()替换为 console.log();
ii. 在wxParse插件目录中全局搜索console将打印全部注释掉 8. 小程序分享功能
!-- pages/index.wxml --
button open-typeshare分享给好友/button
/* pages/js *//*** 用户点击右上角分享*/onShareAppMessage: function() {return {title: 彩票双色球开奖结果查询分析预测,path: /pages/index/ball_index,imageUrl: ../../images/color_ball.png,success: function(e){//要求小程序返回分享目标信息wx.showShareMenu({withShareTicket: true});},fail(e){return false;}};} 欢迎访问小程序DoubleColorBall 成长的路上有你有我 欢迎关注留言讨论 !
