资讯专栏INFORMATION COLUMN

开发微信小程序必看(渲染HTML,动态二维码)

Panda / 2848人阅读

摘要:一前言最近公司要做一个小程序,之前也没接触过,但是用过框架,就直接上手了,毕竟思想是很像的。但是微信小程序的坑还是有的,今天就讲一下思路,如果有需求可以出详细的文章。有错的地方请大家纠正。

一.前言:
最近公司要做一个小程序,之前也没接触过,但是用过Vue框架,就直接上手了,毕竟思想是很像的。
但是微信小程序的坑还是有的,今天就讲一下思路,如果有需求可以出详细的文章。有错的地方请大家纠正。
二. 微信限制

说下微信的限制

下面切换的tab不能超过5个

父页面和子页面的关系不能超过5个

上线打包后的文件不能超过2M

不允许跳转第三方链接(这个很重要,导致很多功能实现不了)

不能给按钮直接下载APP

内嵌H5只能展示,不能对其进行操作

小程序里面没有DOM

小程序不能用本地的图片做背景图

三. 遇到的难点

渲染HTML

​问题:后台给我返回HTML的代码,让我在小程序里渲染

难点:小程序不支持DOM

方案:大神写的 wxParse 可以渲染DOM节点 https://github.com/icindy/wxP...

二维码生成

问题:要根据后台给的URL动态生成二维码

难点:小程序不支持DOM

方案:大神写的 qrcode https://github.com/yingye/wea...

微信API问题

问题:微信的下载文件的API有问题 `wx.downloadFile()` PC上可以用,移动端用不了,而且URL还要用一个域名下

方案:因为我们是要下载图,微信有一个预览图片的API,这个长按可以下载 wx.previewImage()图片

template模板的使用注意点

使用:

App.json文件里不能引入模板文件 如:page/template/teplate

在父页面的 wxml和wxss文件引入template想对应的wxml和wxss文件

Wxml文件:

`

WXss文件:

@import "../tampmask/tampmask.wxss’;

js文件:

​模板里的template.js是不会渲染到 template.js要`写在引入模板文件上面`

​为了避免错误,引号尽量有双引号。

{{}}里不能用toFixed()等函数,要先在js里转化,再在{{}}里渲染

在子页面是可以设置全局的变量的,引入APP()这个对象

微信是可以实现下拉刷新的功能的,微信是有下拉的API的,可以通过获取的值来显示隐藏刷新

四.构建意见

如果内嵌H5 的页面比较多,不要每个页面都写一个页面,一个模块引入一个文件,在根据传进来的值判断显示哪个,否则会很乱

样式可以引入weui库,契合微信的样式

关于登录注册,微信可以直接获取手机号码,不用特地弄个登录注册页

判断是否登录的值可以放在全局的变量里,也可以放在localstroge里面(但是建议放在全局变量里面)。

关于模板,一个把所有模板写在同一个template文件下面,不用写多个,用不同的name来区分和引用,这样比较清晰,便于管理

谢谢大家,如果有问题可以一起探讨

blog:http://blog.beastxw.wang/2019...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93903.html

相关文章

  • 信小程序初探

    摘要:在微信小程序中,要更新视图就只能修改,而视图层也只能通过事件向逻辑层传递交互信息。页面移植到微信小程序要修改的地方也还比较多,主要是标签和的交互及小程序提供的功能部分。 小程序是一种不需要下载安装即可使用的应用,它实现了应用「触手可及」的梦想,用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。 —...

    teren 评论0 收藏0
  • IDE已破解,不用预热,马上进入「微信小程序

    摘要:在众多消息里,啃先生排除掉预测类的信息,汲取了对于技术从业者有用的信息,整理出此文章,说说微信小程序开发的设计理念和入门。以上至少四个文件,即可生成一个最简单的微信小程序。 昨晚临睡觉前,还在想应该给xx打个电话,问问微信应用号应该有原生 UI 吧,要不然跟直接跑 HTML 5 有什么区别? 而今天一大早我便一本正经胡说八道猜想,微信小程序不会有 JS IDE ,一个小时之后,发现被打...

    ghnor 评论0 收藏0
  • 使用TypeScript发微信小程序

    摘要:使用开发微信小程序基础接口核心设计原则之一就是类型检查,通过使用接口可以进行类型检查,满足传统面向对象思想,利于有效开发,有效避免类型转换问题。使用开发微信小程序基础迭代器为每一个对象定义了默认的迭代器。 使用TypeScript开发微信小程序(1)——基础:数据类型(Type) ​TypeScript 的基本数据类型有boolean、number、string 、array、enum...

    xingpingz 评论0 收藏0
  • 使用ES6新特性发微信小程序

    摘要:使用新特性开发微信小程序国际化与本地化新特性国际化与本地化新增了很多对于国际化的支持,比如时间格式,货币格式,数字格式等。 ECMAScript 6(简称ES6)是JavaScript语言的最新标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。 微信小程序支持绝大部分ES6的新增特性。 使用ES6新特性开发微信小程序(1) ES6新特性:Cons...

    Backache 评论0 收藏0
  • 模块化高效发微信小程序—汽车试驾

    摘要:前言年月日,微信小程序发布。这也标志着的,阿里的,的小程序这三架马车在年并驱骑行。传送门试驾小程序开发工具微信开发者工具方便我们在编译时能够实时的看到界面变化,我们并不用此来进行小程序的开发,只充当一个模仪器来使用。 showImg(https://segmentfault.com/img/bVbaqpO?w=558&h=1002); 前言 2017年1月9日,微信小程序发布。这也标志...

    wuyangchun 评论0 收藏0

发表评论

0条评论

Panda

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<