微信小程序--试水
应公司需求,接手小程序,在此之前我是一点也没有接触过,对此,拿过小程序文档和官方案例就一顿恶补,在此期间也看过一些小程序建立模型的视频,终于对小程序知晓一二,拿过项目开始研究。好了废话不多说,总结一下此次做小程序遇到的坑以及难点:
1、input、textera、video等组件层级太高
问题描述:页面有个input文本框,有个自定义的弹框(非微信自己的组件),当弹框显示时候,弹层底下的input文本框覆盖到弹层上,加z-index无效;
解决法案:网上很多人遇到这个问题,大概是微信官方组件的“特点”,所以需要我们手动处理设置一个控制input显示隐藏的变量,iputIsShow: true 默认为true ,input文本框显示,当弹层显示时,iputIsShow:false, input文本框隐藏。但这个方法并不是针对所有场景都有效,当弹窗部分没有遮挡住input文本框时候不适用;
2、页面生成图片
问题描述:把一组数据单独生成一张图片;
解决方案:利用canvas绘制图片,把需要用到的数据添加在canvas上;
3、canvas适配问题
问题描述:小程序中所有的单位都是用rpx,却唯独canvas默认是px;
解决方案: (1)有网友建议单独写一个view,把需要的图片用view写出来,获取它的宽高赋值给canvas(这是什么鬼方法,直接被我pass掉了);
(2)我在思考既然小程序官方可以把px换算rpx,那我们一定也可以把px换算成rpx,果然,官方规定屏幕宽度为750物理像素,无论它在什么设备上宽度都是750物理像素,那么我们就可以获取到它在设备上rpx与px的换算比例:设备宽/750 ,在canvas上的实际宽度为:设备宽/750*实际量取的值
var context = wx.createCanvasContext('mycanvas')
var that = this
// 获取canvas的的宽 自适应宽(设备宽/750) px
var cWidth = wx.getSystemInfoSync().windowWidth/
context.drawImage("/imgs/pic-bg.png", , , cWidth * , cWidth * ); // 国外院校
var forSchool = this.data.dataList.foreigncolleges
// 大于5条数据所取前5条
if (forSchool.length>){
for (var i = ; i < ; i++) {
context.setFillStyle("#eb8848");
context.setFontSize(cWidth * );
context.fillText(forSchool[i].schoolname.trim(), cWidth * , (i + ) * cWidth * + cWidth * ) context.setFillStyle("#b0b4bc");
context.setFontSize(cWidth * );
context.fillText(forSchool[i].ranking.trim(), cWidth * , (i + ) * cWidth * + cWidth * ) //当录取率为null时"-"显示
if (forSchool[i].rate == null){
context.setFillStyle("#b0b4bc");
context.setFontSize(cWidth * );
context.fillText('-', cWidth * , (i + ) * cWidth * + cWidth * )
}else{
context.setFillStyle("#b0b4bc");
context.setFontSize(cWidth * );
context.fillText(forSchool[i].rate.trim(), cWidth * , (i + ) * cWidth * + cWidth * )
} context.beginPath();//开始一个新的路径
context.setStrokeStyle('#eee');
context.moveTo(cWidth * , (i + ) * cWidth * + cWidth * );//路径的起点
context.lineTo(cWidth * , (i + ) * cWidth * + cWidth * );//路径的终点
context.stroke();//对当前路径进行描边
context.closePath();//关闭当前路径
}
} else {//小于5条时全部展示
for (var i = ; i < forSchool.length; i++) {
context.setFillStyle("#eb8848");
context.setFontSize(cWidth * );
context.fillText(forSchool[i].schoolname.trim(), cWidth * , (i + ) * cWidth * + cWidth * ) context.setFillStyle("#b0b4bc");
context.setFontSize(cWidth * );
context.fillText(forSchool[i].ranking.trim(), cWidth * , (i + ) * cWidth * + cWidth * ) //当录取率为null时"-"显示
if (forSchool[i].rate == null) {
context.setFillStyle("#b0b4bc");
context.setFontSize(cWidth * );
context.fillText('-', cWidth * , (i + ) * cWidth * + cWidth * )
} else {
context.setFillStyle("#b0b4bc");
context.setFontSize(cWidth * );
context.fillText(forSchool[i].rate.trim(), cWidth * , (i + ) * cWidth * + cWidth * )
}
context.beginPath();//开始一个新的路径
context.setStrokeStyle('#eee');
context.moveTo(cWidth * , (i + ) * cWidth * + cWidth * );//路径的起点
context.lineTo(cWidth * , (i + ) * cWidth * + cWidth * );//路径的终点
context.stroke();//对当前路径进行描边
context.closePath();//关闭当前路径
}
}
context.draw();
微信小程序--试水的更多相关文章
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序开源项目库汇总
最近做了一个微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 ...
- 微信小程序开源项目库集合
UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...
- 微信小程序一:微信小程序UI组件、开发框架、实用库
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/8079095.html 内容持续更新,维护中 邮箱 ...
- 微信小程序基础之开源项目库汇总
awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:ht ...
- 微信小程序UI组件、开发框架、实用库...
UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...
- 微信小程序框架集合
UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...
- 微信小程序< 3 > ~ 微信小程序开源项目合集
简介 移动开发者想学习微信小程序需要学习一点HTML ,CSS和JS才能够比较快速的上手,参考自己学习Android学习过程,阅读源码是一个很好的方式,所以才收集了一些WeApp的开源项目. awes ...
- 微信小程序开源
| UI组件 | | | | | | | | | weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库 | | | | | | zanui-weapp ★794 - 好用易扩展的小程 ...
随机推荐
- docker实践3
我的docker学习笔记3 $docker run ubuntu echo'hello world' $docker run -i -t ubuntu /bin/bash #ps -ef #exi ...
- ASC学习笔记
TCL:(Tool Command Language), a computer programming languagecharm++:基于C++的面向对象的并行编程语言.Charm++ is a p ...
- spark2.1:读取hive中存储的多元组(string,double)失败
这两天和同事一起在想着如何把一个表的记录减少,表记录包含了:objectid(主小区信息),gridid(归属栅格),height(高度),rsrp(主小区rsrp),n_objectid(邻区),n ...
- python中的多线程
一个程序可以理解为一个进程,这个进程有其代号,可以依据这个代号将其杀死. 一个进程肯定有且只有一个主线程,他可以有很多子线程. 运行一个任务如果可以有许多子线程同时去做,当然会提高效率. 但是,在py ...
- sys.exc_info()可以捕获到任意异常
import sys try: a = 3 assert a > 4 except: exc = sys.exc_info()#返回异常的元祖 print (exc)
- C#之Excel操作
下面的这几个方法是我在项目中经常用到的,欢迎大家批评指正 读取Excel表中的数据 第一种:功能丰富,速度慢 /// <summary> /// 从Excel读取数据 /// </s ...
- java模式之模板模式——抽象类
模板设计模式(Template ) abstract class Action{ // 定义一个行为类 public static final String WORK = "work&quo ...
- 【django小练习之主机管理界面】
需求: 利用django,js,bootstrap等实现登录,主机管理等操作. 实现截图 登录界面 主机界面,添加及编辑 部门管理界面 代码实现 目录层级 settings.py "&quo ...
- 关于redis主从|哨兵|集群模式
关于redis主从.哨兵.集群的介绍网上很多,这里就不赘述了. 一.主从 通过持久化功能,Redis保证了即使在服务器重启的情况下也不会损失(或少量损失)数据,因为持久化会把内存中数据保存到硬盘上,重 ...
- CSS常用字体属性(多出的文本隐藏,或者以省略号的形式显示)和背景样式以及背景图的2个不常用属性:background-origin和background-clip
(一)常用的字体属性: font-weight: 属性值100-900 400等于正常 700等于bold ,数值越大,越粗 font-size:字体大小,单位可以为px或者% font-famil ...