微信小程序研发问题梳理:翻页:下拉:缓存:canvas:富文本:分享

微信小程序研发问题梳理

最近鼓捣小程序的时候，着实遇到了一些问题，尽管有些再翻看文档几遍，就能找到答案，但还是要发挥下烂笔头的功效，顺便梳理下。

问题列表

登录流程
小程序标签页地址无法跳转问题
页面翻页内容加载问题
页面下拉无法触发的问题
小程序本地缓存的使用
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-class='navigator-hover'></navigator>

我的处理方式是本办法，将目标页面copy到一个新目录，换个地址路径

<!-- pages:detail -->
<navigator url='/pages/detail' hover-class='navigator-hover'></navigator>

3.页面翻页内容加载问题

后加载到页面的内容需要堆积到之前的变量里。

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 class="temp_day_box" scroll-x><view class="canvas_height"><image class="canvas_img" src='{{canvasSaveimg}}'></image></view>
</scroll-view>
<canvas canvas-id="canvasWeather" class="canvasHigh"></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 class="temp_day_box" scroll-x bindscroll='scrollCanvas'> <view class="canvas_height" style='transform: translateX(-{{canvasLen}}px);'><canvas canvas-id="canvasWeather" class="canvasHigh"></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 class="block"><view class="content"><!-- 文章内容：START --><view class="content-text"><template is="wxParse" 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-type="share">分享给好友</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

成长的路上有你有我

<欢迎关注留言讨论 !>

微信小程序研发问题梳理:翻页:下拉:缓存:canvas:富文本:分享相关推荐

微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题
微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题 .json文件中----缺点是固定整个页面 {"navigationBarTitleText": "首页&qu ...
【微信小程序】页面tabBar切换、下拉刷新
目录前言一.tabBar切换 1.为什么使用tabBar 2.注意事项(官网提示) 3.如何使用(附源码) 二.下拉刷新前言基本上,所有的小程序,页面底部都有个tab,来实现页面的切换,效果如 ...
微信小程序开发—有关日期选择的下拉框
WXLL代码实现 <picker class='time-picker' mode="multiSelector" bindchange="bindStartMul ...
微信小程序上滑加载和下拉刷新
上滑加载 :上滑是指鼠标上滑或者手指上滑,此时滚动条向下滚动,加载旧数据. 下拉刷新:下拉是指鼠标下拉或者手机下拉,此时滚动条向上滚动,加载新数据. scroll-view方法遇到的问题:如果数据量很 ...
微信小程序如何返回上一页的左上角小房子的坑
微信小程序如何返回上一页的左上角小房子的坑头一次写小程序,写了几个插件和几个页面,写完后发现返回上一页的时候是直接返回到首页了出现这一问题的唯一线索就是左上角的小房子,点击小房子会直接退回到首页, ...
uniapp微信小程序如何返回上一页的左上角小房子的坑
微信小程序如何返回上一页的左上角小房子的坑实际上出现的问题是我在跳转页面的时候选择了wx.relaunch(关闭所有页面,打开到应用内的某个页面),它出现的问题就是会出现小房子. 然后我就把跳转页面 ...
微信小程序新闻列表及详情页
微信小程序新闻列表及详情页页面效果新闻列表 <view class="conatiner"><view class="news-item" ...
微信小程序 scroll-view组件实现列表页实例代码
这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端 ...
微信小程序实战篇-商品详情页（二）
今天要讲解商品详情页中sku的弹出选着框,这个涉及css动画样式,css动画是新的知识点,我们之前并没有接触过,请大家做好笔记,我们要做的效果是酱紫的~ 这个布局难点是需要绘制一个阴影背景.弹出的动画 ...

微信小程序研发问题梳理:翻页:下拉:缓存:canvas:富文本:分享

微信小程序研发问题梳理

微信小程序研发问题梳理:翻页:下拉:缓存:canvas:富文本:分享相关推荐

最新文章

热门文章