小程序模板网

JABrea--从iOS的世界初探微信小程序开发遇的坑与喜(持续更新...) ...

2018-04-25 防风粥

前言

作为一名勤恳单纯的未来iOS开发者,受迫于对新事物的好奇,便义无反顾地举手加入了团队里一个小程序项目的开发中。

首先要声明一下:

本人对前端了解微浅,微信小程序开发也无深入了解,这里仅作为一篇小程序的项目经验总结文来跟大家分享。 
微信小程序处于发展中,内嵌的方法仍在不断改善与补充,相信一些坑也会在未来的版本中被填平。 
本文基于的基础库版本为1.5.3,内容如有疏漏,欢迎指教。 
Dry goods 【干货】

 

一. 值

 

1. setData

1. 
setData:是逻辑层(.js)向视图层(.wxml)进行的数据渲染,是一个异步操作,所以可能需要用到延迟执行方法来确保赋值成功后的操作:

 

				
  1. setTimeout(function () {
  2.  
  3. })
  4. }, duration) // duration: 毫秒(ms)
  1. // 在该作用域里赋值能成功而page的data数据没有更新。但似乎没必要做这样不去刷新页面数据的操作,因为不是视图层需要的数据源没必要写在data中,而且这样可能会污染该值。
 

				
  1. this.data.testData = testData
  2. // 这是真正需要的赋值操作,刷新值后渲染页面。
  3. that.setData({
  4. testData: testData,
  5. })

3.

 

				
  1. // 在闭包中用到this需首先将其引用,并且需要声明在赋值的作用域外层,否则会报`Cannot read property 'data' of undefined`错误。
  2. var that = this
  3. this.setData({
  4. testData: that.data.testData2,
  5. })
  6. // 若setData操作仍在一个闭包内,则同理写成that.setData({})。
  7. { // 闭包
  8. that.setData({
  9. testData: that.data.testData2,
  10. })
  11. }
 

2. 小程序码传参

向后端生成小程序码的请求中传入页面路径path与约定参数(test),即可同navigator跳转方法获得类似。  onLoad: function (options) { var t = options.test }

 

3. 函数不支持带默认参数,有参数的函数,必须传参,而且必须每一个都传,如果是回调闭包也必须提供空操作。举个...

 

				
  1. (network.js)声明的地方
  2. // 获取社团详情
  3. function getCommunityDetail(communityId, success, fail) {
  4. this.get(url.base + url.communityDetail + communityId,
  5. function (res) {
  6. success(res)
  7. },
  8. function (res) {
  9. fail(res)
  10. })
  11. }
  12.  
  13. (communityInfo.js) 用到的地方
  14. network.getCommunityDetail(options.communityId,
  15. function(success) {
  16. // Does something...
  17. },
  18. function(fail) {
  19. // 尽管这里可能不需要做失败处理,但仍需提供这样的空操作
  20. })
 

4. dataset

dataset: 用于组件中传递数据  注意:其设置变量名与取值变量名的格式要求。(文档说明如下)

 

				
  1. (xxx.wxml)
  2. <view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
  3. (xxx.js)
  4. Page({
  5. bindViewTap:function(event){
  6. event.currentTarget.dataset.alphaBeta === 1 // `-` 会转为驼峰写法
  7. event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  8. }
  9. })
 

二. 组件

wx tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件。  so,注定她们是不安定的。但在这里就不一一展开了。

 

1. scroll-view

上述组件嵌套在 scroll-view 中设置css属性 z-index 在真机上不起作用。

安卓端bug:scroll-view嵌套在swiper-item中横向滑动不响应,此时可设置scroll-view的css属性 overflow : auto; 但这又会引来一个美观问题,就是它的横向滚动条冒了出来,此时再设置

 

				
  1. // 这会导致整个scroll-view内的滚动条都被隐藏。
  2. ::-webkit-scrollbar {
  3. width: 0;
  4. height: 0;
  5. color: transparent;
  6. }
 

2. canvas

由于canvas的不可 隐藏性 ,所以想直接生成图片有些阻碍,但也不是不可以,这里提供一种思路。  (需求场景:点击按钮生成一张由下载图片和文字画的canvas,并将其合成为图片,随即预览该图片)  思路:在屏幕所见范围外放置canvas,生成并保存图片后将canvas销毁(wx:if:用此方法销毁)。然而这里有几个让你不得不改变这样的需求的坑:  1:由于绘图方法drawImage未提供回调函数,所以你无法得知何时绘图完成(该回调将在未来版本中添加),对于需要区分图片层级的绘图操作尤为不好。(若图片B在图片A上,则需要先把图片A绘图成功)  2:由于性能问题(最好在安卓真机上测试),尽管把延迟调的很久让绘图操作执行,但时长会发生绘图失败生成一张空白图片可能,造成用户体验不好。  3:特别是多图合成情况,以上问题尤为突出。  需求改动:将点击直接生成合成图片改为跳转到另一个page去展示并且生成。  当然你会想问,让后台直接返回合成的图片不就ok啦?确实是这样的,这会在后面的版本中改过来。

drawImage需是项目资源图片或者是图片下载完毕后保存的文件路径,这里要注意的是下载的图片url必须是安全校验的路径,而image标签使用的https必须经过微信签名验证,自签名不行,如本次项目使用的七牛云就出现了这样的bug:图片加载会变得非常慢甚至无法加载,但是预览图片还是会显示出来。

顺便说一下图片裁剪方法clip会在未来的版本中添加。

 

3. button

按钮无法直接设置背景图  解决思路:把 button 嵌套在 image 中,并把 button 的 opacity 设为0,但这里要特别注意:要将button的css属性 position 设为absolute,设定其绝对位置,否则无法响应点击。

 

4. textarea

textarea标签的默认输入最大输入长度为140。可设置其css属性 maxlength

 

三. util

  1. requrie不支持绝对路径,须使用相对路径导入

这个bug确实很让人抓狂。

  1. 若需要配置指定page的页面信息,在.json文件中直接配置对应属性即可,而不要写成app.json中配置所有页面信息的格式(如下)
 

				
  1. (app.json):不仅有配置页面信息的`window`属性,还包括注册页面的`pages`等属性。
  2. {
  3. "pages": [
  4. // register pages
  5. ],
  6. "window": {
  7. "backgroundTextStyle": "light",
  8. "navigationBarBackgroundColor": "#fff",
  9. "navigationBarTitleText": "CommunityUnion",
  10. "navigationBarTextStyle": "black"
  11. }
  12. }
  13. (页面.json)
  14. {
  15. "backgroundTextStyle": "light",
  16. "navigationBarBackgroundColor": "#fff",
  17. "navigationBarTitleText": "页面",
  18. "navigationBarTextStyle": "green"
  19. }

后话

微信小程序从内测至今已有一年多时间,而我只是在暑假期间(大二)粗略地看了一下开发文档(这里不得不吐槽一下文档网页与其搜索功能),小程序开发过程中给我的感觉是开发起来没有太多的自由,留给开发者的空间不够大,可喜的是微信小程序一直在进步与完善,在社区中您会非常欣(nan)喜(shou)地发现,收到的微信官方答复大多数都是:xx功能考虑在未来的版本中加入...



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23974.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询