微信小程序做一个调查问卷(二)
即将不定期的开放代码
- 核心代码呈现
- 源码下载
- 在微信小程序如何展示富文本编辑器设置的内容
- 多使用缓存技术,防止过多无效的访问
- 题目分为单选题、多选题、简答题
- 设置有其他选项,可进行手动输入选项
- 多选题选择个数设置,只可最多选择三个
核心代码呈现
由于这是私有项目,防止代码泄密。只能部分展示核心逻辑代码,说话要算数,但是不能违反纪律。
源码下载
https://download.csdn.net/download/weixin_42799222/10958116
在微信小程序如何展示富文本编辑器设置的内容
1.这里离不了一个特别重要的插件 wxParse,下载地址:
https://download.csdn.net/download/weixin_42799222/10909212
2.在app.wxss中,顶部引入插件
/**app.wxss**/
@import 'wxParse/wxParse.wxss';
3.在每个页面模块中的js,添加如下语句,加载路径为wxParse目录的存放路径,我的是在根目录。
//引入文件
var WxParse = require('../../wxParse/wxParse.js');
4.在每个页面模块中的wxml,添加如下语句,这也是用来载入插件文件的。
<import src="../../wxParse/wxParse.wxml"/>
5.加载完毕后,进入正题。如何将富文本编辑器的内容正常展示到微信小程序中。首先要将wx.request({})获取回来的数据进行解析。(在页面模块的js文件中)
wx.request({url: config.service.host + '/Index/index',dataType: 'json',success: function (res) {if (res.data.status == 200) {//内容解析var content = res.data.data.foreword;WxParse.wxParse('content', 'html', content, that, 3);// 开启数据缓存cache.put('questionnaire', res.data.data);} else {util.showBusy('未获取新的内容');}}, fail: function (msg) {util.showBusy('请求失败');}})
关键的就在于
WxParse.wxParse(‘content’, ‘html’, content, that, 3);
这里的WxParse的命名是根据本js文件头部加载插件文件声明的变量名命名的,与var WxParse相同即可。
6. 最后就是在wxml页面中进行数据展示了。
<scroll-view class="main-content"><template is="wxParse" data="{{wxParseData:content.nodes}}"/></scroll-view>
外部的scroll-view这个标签就不多解释了,带有滚动条的内容块。内部的template是必须这么写的,id是为了让插件找到需要转换的数据标签内容。data就是对应的数据内容信息了。大家可以在调试区输出查看具体的内容信息。
有疑问或者不懂的可以在评论区评论。
多使用缓存技术,防止过多无效的访问
我们开发人员都知道,小程序中的页面缓存是没有时间限制的,你不操作,它会存在很长时间,这一方面不利于数据的及时更新,相反也在耗费服务端的请求压力。
在utils目录中创建cache.js文件。内容是:
我这里默认有效时间为7200s,具体的使用方法在代码底部。
var dtime = '_deadtime';
function put(k, v, t=7200) {wx.setStorageSync(k, v)var seconds = parseInt(t);if (seconds > 0) {var timestamp = Date.parse(new Date());timestamp = timestamp / 1000 + seconds;wx.setStorageSync(k + dtime, timestamp + "")} else {wx.removeStorageSync(k + dtime)}
}function get(k, def) {var deadtime = parseInt(wx.getStorageSync(k + dtime))if (deadtime) {if (parseInt(deadtime) < Date.parse(new Date()) / 1000) {if (def) { return def; } else { return; }}}var res = wx.getStorageSync(k);if (res) {return res;} else {return def;}
}function remove(k) {wx.removeStorageSync(k);wx.removeStorageSync(k + dtime);
}function clear() {wx.clearStorageSync();
}module.exports = {put: put,get: get,remove: remove,clear: clear,
}// 使用方法:在需要使用的js中引入改js文件(比如文件名为:cache.js),var util = require('../../utils/cache.js');// 设置缓存: util.put('key', 'value', 20) 表示设置缓存失效时间为20秒;// 获取缓存:util.get('key')// 清除缓存:util.remove('key')// 清除所有缓存:util.clear()
题目分为单选题、多选题、简答题
设置有其他选项,可进行手动输入选项
有空写代码
多选题选择个数设置,只可最多选择三个
微信小程序做一个调查问卷(二)相关推荐
- 微信小程序做一个调查问卷
用微信小程序做了一个调查问卷 功能描述: 用户一天只能进行一次问卷调查=>用户登录功能 获取用户意见信息 题目分为单选题.多选题.简答题 *设置有其他选项,可进行手动输入选项 多选题选择个数设置 ...
- 微信小程序做一个圆形图片旋转可以控制开始和结束-音乐播放器的图片旋转功能
微信小程序做一个圆形图片旋转可以控制开始和结束 1.在 WXML 文件中添加一个 标签,并设置图片的 src 和样式,并为其绑定一个 animation 用来控制旋转动画. <image src ...
- 使用微信小程序做一个简易的下拉框,无动画效果,纯原生写法(下拉列表框)
最近在开发的时候,需要使用下拉的效果,但是之前并没有进行书写过,今天做一个简单的demo,来记录一下微信小程序开发的下拉框效果. 微信小程序和jquery最大的区别就是是否操作dom, 微信小程序无需 ...
- 微信小程序|做一个底部评论视图
使用微信小程序开发工具做一个和微信一样的评论视图: 首先我们捋一下这个视图的结构: 黑色的容器最大 包含三个横向 并列的三个红色的容器 第一个红色的容器包含两个橘色的纵向并列的容器. 这样,ind ...
- 微信小程序开发之——调查问卷-案例分析(2.2.1)
一 概述 本节通过开发一个"调查问卷"的案例来学习常用表单组件的使用,以及如何收集用户填写的表单信息提交给服务器,或者从服务器获取数据后显示在表单中 二 原型图 2.1 原型图 2 ...
- 微信小程序开发之——调查问卷-服务器数据交互(2.2.3)
一 概述 小程序与服务器交互说明 利用Express框架,快速搭建HTTP服务器 小程序端编写代码响应HTTP请求 二 小程序与服务器交互说明 将用户提交的表单提交到服务器,可以通过小程序中的网络AP ...
- 微信小程序开发之——调查问卷-编写表单页面(2.2.2)
一 概述 本节介绍表单页面相关的内容: 编写调查问卷表单页面 编写调查问卷样式 设置导航栏标题 二 编写调查问卷表单页面 在微信开发者工具中创建一个新项目,然后在项目中创建pages/index/in ...
- 微信小程序做一个文档预览
文档预览 首先展示效果 js页面 wxml页面 首先展示效果 图片预览: 视频预览 js页面 首先在data中定义变量 itemId:null,saveTopList:[],//存储顶层文件列表fol ...
- 微信小程序 | 做一个小程序端的扫雷游戏
最新文章
- 你的二次元老婆,被AI变成了暗黑系
- 4 通讯_鼎信通讯:2019年净利润同比下降20.58% 拟10转4派1.04元
- 微信读书android换到ios,Android 微信读书本周推荐传送带列表实现
- 休眠锁定模式– OPTIMISTIC_FORCE_INCREMENT锁定模式如何工作
- c 程序设计语言第1 3部分,《C程序设计语言(第2版新版)典藏版》 —1.3 for语句...
- BZOJ4998 星球联盟(LCT+双连通分量+并查集)
- python 笔记 之 装饰器
- UIApplication委托信息(多任务)
- drools规则引擎初探
- 手机屏幕测试html,华为手机屏幕检测代码是什么
- 机器学习常用算法优点及缺点总结
- html表格的基础知识及源代码-尚硅谷
- 傅里叶变换对照表_实验室仪器中英文及缩写对照表
- QQ 第三方登录知识点总结
- Pandas快速合并多张excel表格
- Vray材质学习笔记08——陶瓷材质
- php 国外手机号,国内外手机号码正则表达式
- 热敏电阻PTC和NTC的区别
- 汽车多媒体主机接口EMC设计
- HDF5数据库和mysql数据库_hdf5文件格式使用攻略
热门文章
- shell数组 IFS
- 黎明职业大学计算机教研室主任,黎明职业大学计算机系相关专业.doc
- 图片工具GraphicsMagick的下载安装配置使用
- 推箱子游戏 java源代码_java推箱子游戏源代码(含推箱子的判断)
- 基于Self-Hosted模式搭建K8S可观测平台Pixie(内附填坑方法)
- 高级前端面试题(来自一位朋友的投稿哟)
- Win11图标变成白色文件如何解决?
- web课程设计网页规划与设计(HTML+CSS+JavaScript仿悦世界游戏官网 6个页面)
- 清歌输入法 for Mac(最好用的五笔输入法
- 项目日志20190707