小程序开发注意事项

0.公共样式在app.wss中定义

1.没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中

{

  var2: undefined,

  var3: null,

  var4: "var4"

}

<view>{{var1}}</view>

<view>{{var2}}</view>

<view>{{var3}}</view>

<view>{{var4}}</view>

输出：

null//var3

var4

2.小程序外面自动包裹page标签。

<text><text style='color:yellow;'>First \n</text> DEMO!</text>
text标签中的\n在小程序中认为是换行。

3.关于小程序中的单位

pt可以认为是屏幕的宽长，是逻辑分辨率。px是指在pt下存放的像素点的个数，宽长，是物理分辨率，不是长度单位。对于iPhone6，1pt=2px。

设计稿给出的是物理分辨率，而我们看到的手机屏幕的像素是逻辑分辨率，所以要进行转换（设计稿中px/2=实际在css中设置的px）。但是不同的机型逻辑分辨率不同，对于iphon6 css设置375px是满屏，而iphon6 plus css设置414px是满屏，所以需要一个单位能在不同机型下来做自适应。

在iPhone6下 1px=1rpx=0.5pt.。

一般在iPhone6下设计，此时的px和rpx是1:1对应的，在别的机型下也能自适应。

4. swiper滑块视图容器。

设置滑块的宽高只能在swiper中设置，不能再swiper-item中设置，因为swiper-item继承swiper。swiper-item只能放在swiper中使用，并且一个swiper-item代表一个滑块的容器，可以将图片放在swiper-item中。但是image不会继承，所以还得在image中设置高宽

<swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' interval='{{interval}}' duration='{{duration}}' style='width:100%'> 
<block wx:for="{{imgUrls}}" wx:key='*this'>
<swiper-item> 
<image src='{{item}}' class='slide-image' style='width:100%'></image>
</swiper-item> 
</block>
</swiper> 

5. 关于非app.json

只能配置window选项，因此不需要写“window”。下代码是配置当前页面的头背景

{

"navigationBarBackgroundColor": "#405f80"

}

6. 关于组件中的属性

例如：swiper中的vertical=“flase”,结果还是垂直滑动。因为小程序在解析字符串时，“false”不为空，所以转换成布尔值还是真。解决方法是vertical=”{{false}}”

7.页面跳转

navigateTo，是从一个页面到另一个页面，存在父子关系，这一级关系不能超过10级。navigateTo 的父页面仅hide，redirectTo和navigateBack前页面unload，

8. alt+ctrl+f格式化

9. require（****“****相对路径****”****），导入js文件，绝对路径报错。<import（“相对|绝对路径”）/>，导入wxml文件。@import “相对|绝对”;导入wxss文件,后面需要有；分号，否则出错

10. item 代表一个元素（对象），...item代表把这个（对象）元素里的数据都平铺了

11. 不是异步的可以直接给数值赋值，可以不用setData？

12. 小程序缓存不能超过10m。

小程序缓存共10中方法，四种操作。设置、获取、清除所有缓存、清除指定缓存（都有同步和异步）

13. 在wxml中显示两种画面的方式

（1）使用if-elseif。判断某个变量，选择程现方式。需要写两个或多个组件

<image wx:if="{{collected}}" src='../../../img/collection.png' bindtap='onCollectionTap' ></image>

<image wx:else src='../../../img/oncollection.png' bindtap='onCollectionTap' ></image>

（2）使用三目运算，判断变量来呈现应该要显示什么。写一个组件就可以了

<image src='{{isPlayMusic?"../../../img/start.png":"../../../img/music.png"}}' class='music-img' catchtap='onMusicTap'></image>

14.自定义组件的属性使用data-.,在e.target.dataset或者e.currentarget.dataset中可以取到，当把该数据放在链接url中传递时，在新页面的onload函数的options参数里可以获取。

15. 生命周期函数的options，可以获取链接？后面的数据

16. Target指的是真正点击的对象，currenttarget指的是事件绑定的组件对象。

范围表示：Currenttarget>=Target

17. wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面

18. 组件嵌套，从小范围组件开始开发，外层引用完成，逐层开发。

19. For(var key in arr)console.log(key);对于arr是数组时，key是下标。Arr是对象时，key是键

20.

<view wx:for="{{movies}}" wx:key="{{*this}}">

<template is="movieTemplate" data="{{...item}}"/> 

</view>

重复的元素也包括含有for的组件,使用block就不会显示在页面中

21. Json必须是双引号

22. Block不会出现在页面中

23. scroll-view 可滚动视图区域，注意事项：

1、使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 或内联设置 height。

2、设置 flex不起作用

3、下拉刷新，无法触发 onPullDownRefresh

24、非app.json只能配置window属性

25、下拉刷新，上拉加载。

组合一：使用onReachBottom实现上拉加载，使用onPullDownRefresh实现下拉刷新，使用这种刷新方法，需要对json文件的window属性中设置enablePullDownRefresh：true

组合二：使用<scroll-view scroll-y=“true”bindscrolltolower=“上滑加载”bindscrolltoupper=”下拉刷新”></scroll-view>组件

26、input中的bindchange事件和bindblur事件没有什么不同，即便是文字没有改变，失去焦点、回车均能触发两者

27、Json文件，即便没有配置也要有{}，js文件要有Page（{}）

28、上传有错误：Missed semicolon。缺少分号