微信小程序的注意事项。

深藏阁楼爱情的钟 2024-02-18 21:42 63阅读 0赞

## 图片资源 ##

真实项目中，图片资源尽量不要存储在小程序的目录中，因为小程序的大小不能超过1MB，超过则无法真机运行和发布项目，应该将图片都存在在服务器上，让小程序通过网络来加载图片资源。

## CSS选择器 ##

只支持下表所示的6种选择器。

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>样例</th> 
   <th>样例描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.class</td> 
   <td>.sample</td> 
   <td>选择所有拥有class="sample"的组件</td> 
  </tr> 
  <tr> 
   <td>#id</td> 
   <td>#sample</td> 
   <td>选择所有拥有id="sample"的组件</td> 
  </tr> 
  <tr> 
   <td>element</td> 
   <td>view</td> 
   <td>选择所有view组件</td> 
  </tr> 
  <tr> 
   <td>element,element</td> 
   <td>view,checkbox</td> 
   <td>选择所有文档的view组件和所有的checkbox组件</td> 
  </tr> 
  <tr> 
   <td>::after</td> 
   <td>view::after</td> 
   <td>在view组件后边插入内容</td> 
  </tr> 
  <tr> 
   <td>::before</td> 
   <td>view::before</td> 
   <td>在view组件前边插入内</td> 
  </tr> 
 </tbody> 
</table>

同时需要注意的是，本地资源在wxss中是无法使用的。比如若果使用的是本地图片，则无法显示，可以使用网络图片来代替本地图片。

## 最好是在iPhone 6 的尺寸下做设计图 ##

因为只有在iPhone 6 的尺寸下，设计图的尺寸下，设计图里的1个像素才满足下面的转换关系：  
1 物理像素 = 1 rpx = 0.5 px  
如果不以iPhone 6 的标准来做设计图，也是可以的。但非iPhone 6 的尺寸下，设计图与rpx、px的转换关系就不是整数倍的，计算起来比较麻烦，所以建议设计图最好以iPhone 6 的尺寸标准来设计，这样换算起来很方便。这也是官方建议的一个设计标准。

## Boolean值的陷阱 ##

swipper有一个属性为vertical。这个属性将指明组件面板指示点的排布方向是水平还是垂直，及那个vertical="true"，或者vertical="false"，vertical="aaa"等属性值都会让指示面板呈垂直分布。而vertical=""则呈水平分布。  
原因是即使我们将vertical的值设置为false，但这里的false并不是Boolean类型，而是一个字符串，只要不是空字符串，那么在JavaScript里都会认为这是一个true。  
如果想让面板指示点水平排列，有以下几个方式：

*  不加入vertical值
 *  vertical=""
 *  vertical=\{ \{false\}\}

所有组件的Boolean类型属性都有这样的Boolean陷阱，比如indicator-dots和autoplay也存在这个问题。

## onShow的执行在onReady之前 ##

一个页面要正常显示，必须经历3个生命周期：加载、显示、渲染。注意，这3个生命周期函数的执行顺序，首先是onLoad，其次是onShow，最后才是onReady。

## 调试器中appData格式 ##

让页面的数据以json的形式呈现，点击界面中的【Tree】这个选项，改选为【Code】，数据将以json的形式呈现。

## 数据绑定错误没有提示 ##

关于数据绑定的错误，小程序目前不会给出任何的错误提醒。如果你发现整个页面是空白的又没有错误消息，多半是数据绑定除了问题。这个时候AppData面板是最好的调试工具。

## 父页面跳转到子页面，再次从子页面返回到父页面时，子页面会执行onUnload ##

## 小程序最多只能有5个页面 ##

当我们使用navigateTo从父页面跳转到子页面后，就形成了2个页面层级。可以继续在子页面里使用navigateTo跳转到子页面。  
但小程序里强制规定，只允许有最多五层父子页面。所以请开发者注意，尽量避免多层级的交互方式。事实上，太多的子页面将严重影响用户的产品体验。建议页面最多不要超过3层。  
redirectTo不存在这个问题，因为当跳转到另一个页面后，上一个页面被强制卸载掉了。

## 对于用import来引用模板，建议src中的文件名后缀加.wxml ##

## 何时使用include？何时使用import？ ##

如果模板仅仅是静态wxml，不涉及数据的传递，可以使用include。但如果模板设计数据绑定，还是建议使用import。

## 缓存特点 ##

*  只要用户不主动清除缓存，则缓存一直存在。
 *  请注意移除和清除的区别。删除某一个key的缓存，请使用wx.removeStorage方法；而如果想清除所有的缓存请使用wx.clearStorage方法。
 *  要注意，小程序的缓存永久存在，不存在过期时间这个概念。如果想清除缓存，则需要主动调用清除缓存的API。
 *  小程序的本地缓存有容量上限，最大不允许超过10MB。

## 建议优先考虑同步方法 ##

选取异步方法会大大增加代码风险率和调试难度。如果没有必要（通常是处于性能和体验的考虑），建议优先考虑同步方法。

## 建议多使用flex进行元素布局 ##

## 页面导航栏标题必须在页面生命周期的onReady之后来设置 ##

## 在需要频繁切换的的场景下用hidden更好，在运行时条件不大可能改变时用wx:if较好 ##

## 如果开发者对项目样式要求不是太高，建议尽量选择icon组件 ##

## 建议开发者尽量使用CSS3动画 ##

## 建议能不用动画尽量不用 ##

适度使用动画将大大提升客户端的体验，需要注意的是不要过度使用动画，特别是在一些性能不好的手机上，动画将大大消耗手机性能。建议能不用动画就尽量不用，毕竟小程序是即用即走，做太多动画的意义不大。

## 一定要处理用户拒绝授权的场景，否则程序有可能发生非常严重的的错误 ##

## 建议全局变量的变量名前统一加上一个“g\_”前缀，以同普通变量区别开 ##

## 好好设计页面的顶部部分 ##

分享图片是不能自定义的，MINA框架会将当前页面从顶部开始、高度为80%屏幕宽度的图像作为分享图片。所以，对于我们需要分享的页面，请好好设计页面的顶部部分，以免分享出去图片不美观。

## 建议开发者不要在pagePath、iconPath和selectIconPath前使用“/”开头 ##

对于tarBar的pagePath、iconPath和selectIconPath这几个路径，一定不要以“/”开头。即使他们看起来是绝对类路径也不要在路径前面加“/”。在pagePath前面加“/”将导致错误。如果在iconPath前加“/”，虽然在模拟器中不会出现问题，但将项目在真机上预览时（在开发工具的“项目”里点击“预览”时）开发工具会报错。

wx.request注意事项

*  url中不能有端口。
 *  wx.request的默认超时时间和最大超时时间都是60s。
 *  wx.request的最大并发数是5。

## input组件的输入文本是无法设置字体的 ##

## 因为在小程序中input组件是一个native组件，字体必须使用系统字体，所以无法设置font-family。在真机上运行时，他也将被设置为真机系统的默认字体。   sroll-view组件的横向排布要注意以下几个要点 ##

*  如果sroll-view下排列的多个子元素是块级元素（比如view），就直接对sroll-view设置display:flex和flex-direction:row，不会使子元素自动成为水平排列。如果不使用sroll-view而将容量元素换成view，那么设置display:flex和flex-direction:row是可以使子元素自动成水平排列的。
 *  如果想让sroll-view下的view元素水平排列，一种可行的方法是将子元素view设置为inline-block或者inline-flex。
 *  子元素有可能会出现换行的情况，需要在容器上设置white-space:nowrap。

## sroll-view组件要注意以下几个要点 ##

*  请勿在scroll-view中使用textarea、map、canvas、video组件。
 *  scroll-into-view的优先级高于scroll-top。
 *  在滚动scroll-view时会阻止页面回弹，所以在scroll-view中滚动是无法触发onPullDownRefresh的。
 *  若要使用下拉刷新，请使用页面的滚动，而不是scroll-view，这样也能通过点击顶部状态栏回到页面顶部（经过测试发现，必须点击手机的状态栏而非小程序的导航栏才能返回页面顶部）。

## form表单只会提交6种类型组件的用户输入值 ##