iOS码农的微信小程序开发总结

最近公司需要一个微信小程序demo去给客户看,就研究了几天。

下面就说说开发微信小程序的时候遇到的一些问题,对于小程序的开发教程就不细说了,很多人都写的比我好。下面就说一些我个人觉得比较实用的。

快速创建页面

刚开始开发小程序的时候,一个个创建对应页面的js、json、 wxml、 wxss文件是很痛苦的,后面才发现在全局配置文件app.json中直接配置,然后 Ctrl+S 就会自动生成对应的目录文件了,如下图所示。

Ctrl+S 就会自动生成对应的目录文件

全局的tabBar 和navigationBar配置

1. 全局的tabBar属性和navigationBar属性要尽量配齐。如果没有配齐,在不同版本的微信中,可能会出现不同的情况。比如tabBar的背景颜色可能有默认颜色,可能没有默认颜色,具体对应微信哪些版本,我并没有去测试。

2.全局文件的颜色配置只支持16进制,不支持像red这种。


尽量使用最新版本的微信测试

在一些相对较旧版本的微信中,当你使用了较新的API时,在真机中有可能出现事件不响应,而微信小程序又不能真机调试,这时候就坑爹了,不知道出现什么原因,模拟器运行又没有问题。所以当你测试真机的时候出现了莫名其妙的问题时,你可以看看当前版本的微信是否时最新的。

一般在安卓机测试是比较少问题的,安卓机使用的是QQ的内核。而iOS就比较坑了,在不同的机型上也会有点问题,目前在布局上,遇到i5  9.0系统出现了布局不规范,暂时还没有找到原因。

wx.showToast 提示框

目前微信的showToast都一定会带着图片,假如知道怎么去掉图片的同学,请告知一下。

动态设置属性

动态设置属性格式

Flex布局模式

骰子布局

网格布局主要依赖flex属性

百分比布局

流式布局

代码在 https://github.com/icindy/wxflex90  

感谢WeAppDev的分享。博客地址 https://weappdev.com/t/flex-wxflex/144/2

闭包概念

var that = this  的使用。js和swift一样存在闭包,当我们在一个自定义方法内使用了wx.request()时,假如用到了外部data的数据时,就需要var that = this,从而使用data的数据。

template 模版

在模版中定义代码片段,然后在需要时调用.微信小程序的模版可以用name属性作为标记,在页面中使用<template is="模版name名称" ...  这样就可以使用了。

支持import和include

import引用是有作用域,只能引用当前指向文件中的template

include相当于复制,会复制template里面的全部内容,但是不包含template


支持import和include

每个页面的XXX.js不能为空,否则下面会出现  1. Forgot to add page route in app.json. 2. Invoking Page() in async task. 的错误


条件渲染:主要是wx:if 和 block wx:if 

列表渲染 : wx:for

wx:for 绑定的是一个数组,数组当前的下标变量名默认为index,数组当前的变量名为item。使用wx:for-item就可以指定数组当前元素的变量名,wx:for-index可以指定数组当前下标的变量名,wx:for如果嵌套的话,就需要改变默认框架定义的名称。

调试工具

wIxml panel :在调试中可以看到真实的页面结构以及结构对应的 wxss 属性,也可以修改对应 wxss 属性,在模拟器中实时看到修改的情况

Sources panel :其实就是拿来断点的。

Network panel :可以看到请求的详细情况。

App data panel :可以看到当前页面的实时数据,也可以实时修改页面上的数据。

Storage panel  : 用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。

Console panel : 可以输入和调试代码

附上官方文档 : https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/debug.html#console-panel

最后建议还未学或者刚开始学的同学看一下 微信小程序的 Q&A 文档,比如  background-image:可以使用网络图片,或者 base64,或者使用  等等一些小知识点,都是开发中挺实用的  附上网址 https://mp.weixin.qq.com/debug/wxadoc/dev/qa/qa.html?t=20161122

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容

  • 昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文档给的框架说起,微信小程序官方文档给出了...
    Mr大大大阅读 47,129评论 9 68
  • 微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们...
    未央大佬阅读 2,282评论 0 12
  • WXML WXML(WeiXin Markup Language)是微信的一套标签语言,结合基础组件、事件系统,可...
    许剑锋阅读 6,753评论 3 51
  • 给提问的开发者的建议:提问之前先查询 文档、通过社区右上角搜索搜索已经存在的问题。 写一个简明扼要的标题,并且...
    极乐叔阅读 13,334评论 0 3
  • 秋风解落叶,纷纷化蝶飞。 孩童手执帚,遍遍扫秋叶。 忽有秋风起,不怜人辛苦。 稚童无奈何,欲执斧除根。
    井溢阅读 289评论 0 1