微信小程序开发实践
项目是否适合移植到小程序上?
小程序由于微信提供了一些组件,在微信中的一些体验确实不错,对于开发来说,由数据驱动的开发模式也是挺爽的。
概要介绍
其实就是类似于VUE REACT的 MVVM模式,专注于数据和逻辑。
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。
实践得到的经验
规则
1.目前打包后的文件不能超过2M,否则不能上传到微信服务器。
小程序不支持的
1.不支持sass语法
2.不支持window、document,不能使用相关的库,如jquery、PreventMoveOverScroll。
3.不支持直接使用svg标签开发。image的src放远程svg可以,background-image里也可以。
但是可以使用的canvas标签(canvas坑:position absolute的层盖不住canvas),可以使用的库:wx-charts (有坑,放在app.js中然后在page中引用的话,找不到ringChart上面的函数,如ringChart.addEventListener。要直接在page中引库。)。
4.不支持阻止默认事件,没有preventDefault
。
5.没有br
标签。
6.不支持table
表格。
7.不能使用
来增大文字间距。
8.小程序的xxx.wxss
文件font-face的url不接受http地址作为参数,可以接受 base64 ,因此可以先将字体文件下载后,转换为base64,然后再引用。链接。
新特性
1.img标签换成了image标签<image src="http://sfe.ykt.io/o_1bbd2f7j02583ii2rg1p441gvo9.jpg"></image>
。
2.text
标签认\n换行,不能包裹<br/>
标签,会直接输出出来,有点类似textarea
。
3.小程序中 :nth-child(n) 是从0开始的。
4.switch
标签。但是不能改变大小样式,像老radio
标签一样讨厌。
5.picker
标签。但是在开发者工具中选项不会循环,在安卓手机预览中选项会循环。
6.scroll-view
标签。有滚动条的盒子。要想在进入页面的时候自动滚动到某处,可以使用scroll-view的scroll-into-view属性,不过一定要在scroll-view存在后设置才会生效,尤其是通过template引用的时候,比如同时通过setData设置使用该template和scroll-into-view的值,并不会使滚动生效。
7.关于屏幕下拉露底:Android不会,iPhone会。可以通过配置解决:disableScroll Boolean false 设置为 true 则页面整体不能上下滚动;只在page.json中有效,无法在app.json中设置该项。链接。
8.template
标签
模板的作用域:模板拥有自己的作用域,只能使用data传入的数据。
9.在功能按钮上使用catchtap
防止冒泡
10.hidden
参数,控制蒙版的利器
小窍门
1.关于下拉刷新
要在page.json中设置 enablePullDownRefresh: true
onPullDownRefresh
内要手动stopPullDownRefresh
,否则一直在点点点(loading)。
2.page的onload函数中有参数options可以获取路径的query
3.小程序的支付和微信的支付不是一个appid,需要后端新开发下单接口
4.wxml最好在开发者工具编辑(有提示)。js, wxss可以在熟悉的编辑器编辑。
5.小程序中如果赋予的新值是undefined的话,根本不会进行赋值,也不会覆盖之前的值。如:
app.setData({
isPaperCollected: finishedQuizList['id'+quizID] || false
})
6.通过多次使用Object.assign({}) 解决data也模块化后data不能深层复制的问题。
Object.assign不是深层复制。
7.在微信web开发者工具中一定要在动作->设置->勾上“不使用任何代理,勾选后直连网络”,否则老是报“
Failed to load resource: net::ERR_NAME_NOT_RESOLVED”的bug:链接
8.每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置app.json中的window配置项的内容,页面中配置项会覆盖app.json的window中相同的配置项。页面的.json只能设置window相关的配置项,以决定本页面的窗口表现,所以无需写 window
这个键。链接。
9.data是在page中设置的,不是在app.js中的。不涉及渲染的可以不要放data里面。
10.Page.prototype.setData()变更数据同时更新页面数据。
setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
11.wx:if 是惰性的,如果在初始渲染条件为false
,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
会话管理
微信的网络请求接口 wx.request() 没有携带 Cookies,这让传统基于 Cookies 实现的会话管理不再适用。为了让处理微信小程序的服务能够识别会话,我们会话管理使用weapp-session-client。这需要服务端的支持。基本原理是包装wx.request并在 Header 上使用特殊的字段跟踪。
使用时遇到的问题:
1.微信开发者工具报错:Uncaught ReferenceError: regeneratorRuntime is not defined
原因是 Generator 函数不被支持。
解决方法:
2.题外话:善用 Promise
本项目后端处理会话管理时要求发送请求时不能使用相同的 X-WX-Code发送多次全部header数据,RawData、Signature等,否则报错。
所以使用weapp-session-client登录的时候要等login返回之后再发送其他的请求,
小程序加载后立即顺序执行app.js和page.js里面的配置,但是wx request是异步的,所以有可能page中的请求开始执行时app.js中的login还没结束,就会导致bug。
可以使用个promise解决掉。
进阶
2.疑问:微信切换账号会不会销毁小程序
3.检查TLS版本的问题
http://www.dongcoder.com/detail-410653.html
解决方法:微信开发者工具勾选开发时不检查检查TLS版本或后端配置
4.蓝牙、震动的调用
微信小程序开发实践的更多相关文章
- $微信小程序开发实践点滴——接入Bmob后端云
Bmob后端云官网:http://www.bmob.cn/ 微信公众平台官网:https://mp.weixin.qq.com/ 微信小程序官方开发文档:https://mp.weixin.qq.co ...
- 【小程序】微信小程序开发实践
帐号相关流程 注册范围 企业 政府 媒体 其他组织 换句话讲就是不让个人开发者注册. :) 填写企业信息 不能使用和之前的公众号账户相同的邮箱,也就是说小程序是和微信公众号一个层级的. 填写公司机构信 ...
- $微信小程序开发实践点滴——Bmob常用API的使用
Bmob后端云官网:http://www.bmob.cn/ Bmob后端云微信小程序开发文档:http://docs.bmob.cn/data/wechatApp/b_developdoc/doc/i ...
- $微信小程序开发实践点滴——Bmob基本REST API的python封装
Refer:Bmob后端云REST API接口文档:http://docs.bmob.cn/data/Restful/a_faststart/doc/index.html 本文使用python对Bmo ...
- 初尝微信小程序开发与实践
这可能是一个java程序员最不务正业的一次分享了. 小程序的火热相信不用我多说了,年初的时候老婆去浦东某达面试,甚至都被问有没有小程序测试经验.俨然小程序成为了互联网公司自PC,WAP,安卓,IOS之 ...
- 微信小程序开发入门与实践
基础知识---- MINA 框架 为方便微信小程序开发,微信为小程序提供了 MINA 框架,这套框架集成了大量的原生组件以及 API.通过这套框架,我们可以方便快捷的完成相关的小程序开发工作. MIN ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 这是一篇满载真诚的微信小程序开发干货
1月9日零点刚过,张小龙与团队正式发布微信小程序.它究竟能在微信8.5亿用户中牵动多少人,现在还很难说.但对于创业者来讲,小程序无疑带来了新契机,以及服务“上帝”们的新方式. 从今天起,只要开发者登录 ...
随机推荐
- [转] 智能合约开发环境搭建及Hello World合约
[From] http://www.cnblogs.com/tinyxiong/p/7898599.html 如果你对于以太坊智能合约开发还没有概念(本文会假设你已经知道这些概念),建议先阅读入门篇. ...
- 数据插入INSERT
一.INSERT SELECT :将查询的数据直接插入 特点: 1.一次性插入所有查询出来的数据. 2.数据原子性,有一个失败全部失败. 3.没有指定的列加默认值或NULL,都没有就报错. 二.INS ...
- 6.ConcurrentHashMap jdk1.7
6.1 hash算法 就是把任意长度的输入,通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩映射,也就是,散列值的空间通常远小于输入的空间,不同的输入可能会散列成相同的输出,所 ...
- 引导篇之web结构组件
web结构组件有如下几种: 代理 HTTP代理服务器,是Web安全.应用集成以及性能优化的重要组成模块.代理位于客户端和服务器之间,接收所有客户端的HTTP请求,并将这些请求转发给服务器(可能会对请求 ...
- groovy与javah互相调用
暂时只找到这几种方法.groovy代码方便灵活.常用来写一些工具.一般都是java加入groovy代码 第一种 java中加入 groovy代码就是 Toy.groovy class Toy{ def ...
- B站视频下载(VideoHelper)
继续上次的知乎爬虫, 这次开始了哔哩哔哩的爬虫实践: 首先介绍下如何下载吧: VideoHelper 里面有三种方式下载b站视频. 同样的流程, 还是先抓包,分析参数,寻找参数(包括之前的请求包和页面 ...
- 虚拟机vmware 上不去 连不上网问题解决
开始---设置--控制面板---管理工具---服务 确保 VMware DHCP Service 和VMware NAT Service 服务已经启动
- D3(v5) in TypeScript 坐标轴之 scaleBand用法
在学习d3时候,发现在TS中实现D3的坐标轴中遇到一些错误,而这些错误却不会存在于js(因为ts的类型检查)写法中,因此做下笔记: import * as d3 from 'd3';import * ...
- SQL动态配置,动态解析SQL
在项目中使用SQL动态配置的方式可以让后期的维护和发布后的修改变得更加方便,无论使用那种配置方式都离不开解析成最终真正能执行的SQL.下面代码就是一种比较简单的处理方法,SQL的参数以##括起来. 1 ...
- (转载)C#获取当前应用程序所在路径及环境变量
一.获取当前文件的路径 string str1=Process.GetCurrentProcess().MainModule.FileName;//可获得当前执行的exe的文件名. string st ...