pp电子

登录
免费开通

微信小程序开发实践教程

微信小程序开发实践教程

小程序由于微信提供了一些组件,,,,,,在微信中的一些体验确实不错,,,,,,关于开发来说,,,,,,由数据驱动的开发模式也是挺爽的。。。。。。

提要介绍

着实就是类似于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=/miniprogramschool/"/uploads/allimg/180522/161J22b5-0.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会。。。。。????梢酝ü柚媒饩觯篸isableScroll 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也????榛骴ata不可深层复制的问题。。。。。。
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。。。。。。这需要服务端的支持。。。。。。;;;丛蠢硎前皐x.request并在 Header 上使用特殊的字段跟踪。。。。。。

使用时遇到的问题:
1.微信开发者工具报错:Uncaught ReferenceError: regeneratorRuntime is not defined
原因是 Generator 函数不被支持。。。。。。
解决要领:

  • 微信开发者工具关闭ES6转ES5
  • 真正解决步伐,,,,,,提供regeneratorRuntime

2.题外话:善用 Promise
本项目后端处理会话治理时要求发送请求时不可使用相同的 X-WX-Code发送多次所有header数据,,,,,,RawData、Signature等,,,,,,否则报错。。。。。。
以是使用weapp-session-client登录的时间要等login返回之后再发送其他的请求,,,,,,
小程序加载后连忙顺序执行app.js和page.js内里的设置,,,,,,可是wx request是异步的,,,,,,以是有可能page中的请求最先执行时app.js中的login还没竣事,,,,,,就会导致bug。。。。。。
可以使用个promise解决掉。。。。。。

进阶

1.扩展微信小程序框架功效

2.疑问:微信切换账号会不会销毁小程序

3.检查TLS版本的问题
http://www.dongcoder.com/detail-410653.html
解决要领:微信开发者工具勾选开发时不检查检查TLS版本或后端设置

4.蓝牙、震惊的挪用


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,,,,,,由于未联系到知识产权人或未发明有关知识产权的挂号,,,,,,若有知识产权人并不肯意我们使用,,,,,,若是有侵权请连忙联系。。。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,,,,,,仅系客观性形貌,,,,,,如您需要相识该类商品/服务详细的资讯,,,,,,请您直接与该类商品/服务的提供者联系。。。。。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。。

KESION 一直通过手艺立异,,,,,,提供产品和服务,,,,,,助力企业向数字化转型,,,,,,通过科技驱动商业刷新,,,,,,让商业变得更智慧!



▼点击进入pp电子官网相识更多



上/下篇
  • 微信小程序怎么开发

  • 微信商城小程序开发注重要点

换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序开发实践教程 - KESION pp电子