用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

前端开发微信小程序的个人经验总结–持续更新【原创】

Rolan 2018-3-9 00:21

1.开发微信小程序之前,先要知道小程序是什么,优势是什么。知乎上看到的一个回复 :https://www.zhihu.com/question/508809602.开始看小程序的开发文档,网上很多教程,但还是看官方的文档比较全面。附官方文档地址 ...

1.开发微信小程序之前,先要知道小程序是什么,优势是什么。

知乎上看到的一个回复 : https://www.zhihu.com/question/50880960

2.开始看小程序的开发文档,网上很多教程,但还是看官方的文档比较全面。

附官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html

安装步骤之类的,都在官方文档里。

3.小程序文档看完一遍了,开始用wxml  wxs  wxss 搭一个简单的界面吧。

发现其实微信小程序与html +css +js有很多的相似之处,除了标签不太一样,貌似都差不多。

4.简单的搭了几个界面,发现代码并没有达到微信小程序的宗旨 : 逻辑与渲染分离 。

比如一个简单的模块:

<view>充值10元</view>

<view>充值10元</view>

<view>充值10元</view>

<view>充值10元</view>

如果纯HTML写 可能你这行代码要复制好几遍 。

如果你用小程序写 你只需要 :

<block wx:for=”item”>

<view >{{ item }}<view>

</block>

就可以循环出 同样的几行代码 。

小程序实战经验总结:

  1.   小程序image标签选择大图片的时候,图片会变形

原因是 小程序的image标签会自带宽高  320 * 240

需要设置一下 mode = “widthFix”  就可以 变成原图片的宽高了

  1.  文字需要换行\n 或者需要 占位符 &nbsp时, 必须要使用 text 标签 否则无效 。

要使用&nbsp  &lt这一类的 符号时  需要在text标签内设置    decode =“{{ture}}”

  1. 小程序 做嵌套循环时  数据不方便放在data 里  

解决方案 :  把需要循环的模块做成模板 ,模板里的data设置成变量。

在调用模板时 调用时的data 里再把变量换成需要调用的数组 或者 字符串等。

  1. 微信小程序里 是不支持 background 为图片的。

解决方法 : 直接使用 image 标签 ,src 设置成网络图片,如果需要做成背景, 在image标签里 加一个子标签 ,里面设置绝对定位就可以了 。

<image>

<view>    这行设置相对于image 绝对定位 ,就可以实现背景图效果    </view>

</image>

  1. 设置全局变量属性

小程序里,变量一般是放在每个文件夹的js里的 ,有时候所有页面都用到 某个数据时 ,一个个申明 太麻烦 ,所以定义一个全局变量 。

首先要在最外面的 app.js 里 的 globalData 里把需要的数据 放进去 。

如 : globalData: {

userInfo: null,

url: “http://m.yayuanzi.com/”,

}

再在你需要调用的页面的文件夹里的js文件中 。

在第一行加上const app = getApp();

然后定义一个变量,把数据放在这个变量里

如 :

data: {

//获得官网地址

address: app.globalData.url,

}

最后  这个address 就可以在页面里用了 。

  1. 小程序列表渲染 wx :key 的问题

小程序列表渲染是使用 wx:for = “ {{  循环的参数  }} ”

如果不加wx:key = “ 参数 ” 的话 ,调试工具中会出现 黄色的警告信息 。 但不会影响页面 。

网上找的原因 :

wx:key 的值以两种形式提供

1、wx:key=”property” 其中property是代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。类似于字典的key值

2、wx:key=”*this”, 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组

件保持自身的状态,并且提高列表渲染时的效率。

不添加wx:key情况:

<block wx:for-items=”{{userInfoList}}” >,会出现warning: Now you can provide attr “wx:key” for a “wx:for” to improve performance. 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

  1. 小程序里 的单位

小程序的单位rpx 是根据屏幕来自适应的,开发的时候,把开发工具里的 手机模型选成 iphone 6 。 这样的话,1px = 2rpx ,方便开发。

8.小程序 image跟view标签上下会有空隙

解决方案 就是可以在image那里设置vertical-align:top/bottom/text-top/text-bottom

原因:图片文字等inline元素默许是跟父级元素的baseline对齐,而baseline又和父级底边有必定间距

转载时请注明出处及相应链接,本文永久地址:http://blog.yayuanzi.com/23383.html

鲜花
鲜花 (2)
鸡蛋
鸡蛋

刚表态过的朋友 (2 人)

分享至 : QQ空间
收藏
原作者: harbour 来自: blog

相关阅读

  • wconkyliu72 2018-3-12 09:46
    如果你用小程序写 你只需要 :

    <block wx:for=”item”>

    <view >{{ item }}<view>

    </block>

    就可以循环出 同样的几行代码 。
    ----------------------------------------------------------
    这一块格式要这样wx:for="{{}}"
    不然会把 wx:for="" 的值解析成字符串数组