小程序遇坑总结（持续。。）

一. 小程序引入图片问题

官方文档上一般有三种引入图片的方式：
1、<image src="本地路径、cdn链接（网络图片）或base64编码图" />
2、wxss文件中引用属性background：url（cdn链接（网络图片）或base64编码图）
注：wxss里不能引入本地图片

image.png
3、若是需要用到icon图标
可用阿里巴巴字体库创建的项目的 unicode 代码
icon实际引入

二、组件 与 模板 (block 标签 template 标签)

组件是页面的基本组成单元，例如视图容器的 view, 基础内容的 text, 表单的 button 等，完整列表。

注意，<block /> 可以来包含一组组件，但是 <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。例子如下

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

import 可以在当前文件中使用目标文件定义的 template

在 item.wxml 中定义了一个 item 的 template

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用 item.wxml，就可以使用 item 的模板

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
 //  import 不支持链式效果

即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

三、scroll-view组件

这个组件样式属性设置display：flex；是没有用的会影响里面的flex布局
可以在scroll-view外面包裹起来，在外层设置display：flex；

image.png

四、小程序生命周期—App.js

App() 必须在 app.js 中注册，且不能注册多个。所以App（）方法在一个小程序中有且仅有一个。
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。先上代码：

App({
 onLaunch: function () {
     console.log('App onLaunch');

 },

 onShow:function (){
    console.log('App onShow');

 },

 onHide:function(){
     console.log('App onHide');

 },
 onError:function(){
    console.log('App onError');

 },

 getPics: function() {
     return this.globalData.picList;
 },
 globalData:{
     picList: [] // 图片列表
 },

 globalName: 'tangdekun'

});

页面周期

onLoad: 页面加载一个页面只会调用一次
接收页面参数 可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
onShow: 页面显示
每次打开页面都会调用一次。
onReady: 页面初次渲染完成
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
onHide: 页面隐藏
当navigateTo或底部tab切换时调用。
onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。