$\color{#48b885} {1. 微信小程序介绍}$

$\color{#48b885} {1.1. 为什么是微信小程序?}$

轻量级

大流量

商业价值

$\color{#48b885} {1.2. 微信小程序历史}$

由腾讯公司微信团队开发

$\color{#48b885} {1.3. 疯狂的微信小程序}$

5000亿商业价值,横跨200多个行业

$\color{#48b885} {1.4. 还有其他平台的小程序,不能忽视}$

支付宝小程序

抖音小程序

$\color{#48b885} {2. 环境准备}$

下载好微信开发者工具

注册建议使用全新的邮箱，没有注册过其他小程序或者公众号的。

$\color{#48b885} {2.1. 注册账号}$

1 进入 mp.weixin.qq.com/

2 点击[小程序] 里的 [查看详情]

3 点击接入流程的前往注册

4 注册

$\color{#48b885} {2.2. 获取AppID}$

1 进入 mp.weixin.qq.com/

2 选择微信扫码, 选择带有 aliyun邮箱的那个账号

3 点击 [开发] [开发管理] [开发设置] [复制开发AppId] [wxf4b5ce10148b1025]

4 获取appid成功

$\color{#48b885} {2.3. 开发者工具}$

developers.weixin.qq.com/miniprogram…

$\color{#48b885} {3. 第一个微信小程序}$

$\color{#48b885} {3.1. 打开微信开发者工具}$

打开了

$\color{#48b885} {3.2. 新建小程序项目}$

新建了

$\color{#48b885} {3.3. 填写项目信息}$

1 填写项目名称 [wx-mina-basic]

2 选择项目地址 [/Users/mac/Desktop/codebase/diygou_front_codebase/diygou_前端知识点代码/6-wx-mina/wx-mina-basic]

3 填写AppID

4 radio选中不使用云服务, 语言选择JS

$\color{#48b885} {3.4. 创建成功}$

确实创建成功了

$\color{#48b885} {4. 开发工具的使用文档}$

w x开发者工具的使用文档: developers.weixin.qq.com/miniprogram…

$\color{#48b885} {5. 小程序结构目录}$

$\color{#48b885} {5.1. 小程序文件结构和传统Web区别}$

$\color{#48b885} {5.2. 基本的项目目录}$

1 使用shell命令打出文件夹骨架

cd projDir
tree ./

2 查看结果

├── app.js wx-mina-app项目入口文件
├── app.json 全局配置文件
├── app.wxss 全局样式文件
├── pages	────────────	页面文件夹
│   ├── index	────────────	首页文件夹
│   │   ├── index.js	────────────	首页的逻辑文件
│   │   ├── index.json	────────────	首页的配置文件
│   │   ├── index.wxml	────────────	首页的结构文件
│   │   └── index.wxss	────────────	首页的样式文件
│   └── logs	────────────	日志页文件夹
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
├── project.config.json	────────────	项目的配置文件
├── sitemap.json	────────────	微信索引配置文件
└── utils	────────────	第三方工具js (可以删除)
    └── util.js

3 小程序的目标就是简单高效的开发与原生app级别的程序

4 小程序文件结构和传统Web对比

$\color{#48b885} {结构}$	$\color{#48b885} {传统Web}$	$\color{#48b885} {微信小程序}$
结构	html	wxml
样式	css	wxss
逻辑	javascript	javascript
配置	无	json

$\color{#48b885} {6. 小程序配置}$

$\color{#48b885} {6.1. 全局配置app.json}$

每当我们创建一个新页面就要在app.json里添加一个页面的配置项

假设我们需要创建 demo01 这个页面

1 在vscode里mina项目里的app.json 里复制一行页面配置改一下demo01



{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo01/demo01" //这是我们加入的
   ],
  "window": {
    "backgroundTextStyle": "dark", // 下拉 loading 的样式，仅支持 dark / light
    "navigationBarBackgroundColor": "#48b885", //  导航栏背景颜色
    "navigationBarTitleText": "appjson", // 导航栏标题文字内容
    "navigationBarTextStyle": "black" // 导航栏标题颜色
  },
  "style": "v2", // v2 启用新版的组件样式
  "sitemapLocation": "sitemap.json", // sitemap文件相对地址
  "enablePullDownRefresh": true, //开启下拉刷新
  "backgroundColor": "#00ff00"  //下拉刷新时候能看到的颜色
}

2 回到微信开发者工具 command + s保存,工具会根据配置生成文件夹和文件,快速高效

3 确实生成了

$\color{#48b885} {6.1.1. tabbar使用}$

1 tabbar几个关键属性

backgroundColor --------- 背景颜色

selectedIconPath --------- 点击icon路径

selectedColor ------------- 选中的icon的颜色

borderStyle -------------- tabbar 的边框

IconPath ----------------- 未选中的icon路径

color --------------------- 未选中的icon颜色

postion ------------------- 值为top固定在小程序顶部,bottom定位在小程序地址default: bottom

从零使用出一个tabbar

1 vscode 写三行app.json配置

  "pages": [
    "pages/index/index",
    "pages/demo01/demo01",
    "pages/demo02/demo02",
    "pages/img/img", // 写
    "pages/search/search", // 写
    "pages/mine/mine" // 写
   ],

2 回到微信开发者工具的app .json 保存

点击微信开发者工具的app.json => command + S

3 在微信开发者工具 pages 属性同级敲tabbar,tab补全

4 拿到一组icon,_home.png是未激活的icon, home.png是激活的icon,放在pages文件同级

5 编写tabbar配置,在app



{
  "tabBar": {
     "color": "#0094ff", // icon未被选中后文字的颜色
     "selectedColor": "#ff0000", // icon被选中后文字的颜色
     "backgroundColor":"#eeeeee", // tabbar背景颜色
     "position":"top", // bottom固定在底部,top固定在顶部,default:bottom;
     "list": [ // icon配置的列表,每一个子级对象就是一个icon的配置
       {
       "pagePath": "pages/index/index", // 点击这个icon要跳转的路径
       "text": "首页", // icon标题
       "iconPath": "./icon/_home.png", // icon未选中的图片路径
       "selectedIconPath": "./icon/home.png" // icon选中的图片路径
     },
     {
      "pagePath": "pages/img/img",
      "text": "图片",
      "iconPath": "./icon/_img.png",
      "selectedIconPath": "./icon/img.png"
      },
      {
       "pagePath": "pages/search/search",
       "text": "搜索",
       "iconPath": "./icon/_search.png",
       "selectedIconPath": "./icon/search.png"
       },
       {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "./icon/_my.png",
        "selectedIconPath": "./icon/my.png"
       }
     ]
  },
}

$\color{#48b885} {6.2. 页面配置 page.json}$

主要存放当前页面子组件的配置

{
  "usingComponents": {},
  "navigationBarTitleText": "mine", // 小程序上方的标题
  "navigationBarBackgroundColor": "#ff0000" // 小程序顶部背景颜色,如果没写,继承app.json的navigationBarBackgroundColor
}

$\color{#48b885} {6.3. sitemap配置(微信内seo优化)}$

developers.weixin.qq.com/miniprogram…

点击[全局配置] 点击[tabbar],可以看到背景颜色之类的属性

$\color{#48b885} {6.4. 小程序开发开始前的技巧}$

1 app.json page字段,哪一行放在第一行,打开开发者工具就会显示那个页面

2 元素和web元素的区别, 数据绑定

在demo01js里写数据, vscode 全删了然后 wx-page tab 补全



//Page Object
Page({
  data: {
    salary: 2000,
  },
  //options(Object)
  onLoad: function (options) {

  },
});

编写结构



<!--
	1 text 相当于以前web中的 span 行内元素 不换行
  2 view 相当于以前web中的  div 块级元素   换行
-->
<text>1</text>
<text>2</text>
<view>3</view>
<view>4</view>
<view>{{salary}}</view>

看效果,确实有数据展示出来

$\color{#48b885} {7. 模版语法}$

$\color{#48b885} {7.1. 数据绑定}$

$\color{#48b885} {7.1.1. 普通写法}$

Number,String,Boolean

js



// pages/demo02/demo02.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    count: 100,
    username: 'diygou8',
    isGirl: false,
    vipUser: {
      vipName: 'diyu',
      vipAge: 21,
      vipType: '大牛思维,恐怖如斯'
    }
  }

})

wxml



<!-- wx-mina: 数据绑定 -->
<!-- Number -->
<text>{{count}}</text>
<!-- String -->
<text>{{count}}</text>
<!-- Boolean -->
<text>{{isGirl}}</text>
<!-- Object -->
<view>
  <view>{{vipUser.vipName}}</view>
  <view>{{vipUser.vipAge}}</view>
  <view>{{vipUser.vipType}}</view>
</view>

$\color{#48b885} {7.1.2. 组件属性}$

js



// pages/demo02/demo02.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num: 1000,
  }

})

wxml



<!-- wx-mina: 数据绑定 -->
<!-- 组件属性 -->
<view data-num="{{num}}"></view>

确实在开发者工具调试element里元素属性上看到值

$\color{#48b885} {7.1.3. bool类型}$

js



// pages/demo02/demo02.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isGirl: false,
  }

})

wxml



<!-- Boolean -->
<text>{{isGirl}}</text>

$\color{#48b885} {7.2. 运算}$

$\color{#48b885} {7.2.1. 三元运算}$

js



//Page Object
Page({
  data: {
    salary: Math.random(),
  },
});

Wxml



<!-- 运算 -->
<!-- 三元 -->
<view>{{salary}}</view>
<view>{{salary > 0.5 ? '工资大于0.5w' : '工资小于0.5w'}}</view>

$\color{#48b885} {7.2.2. 算术运算}$

Wxml



<!-- 算术 -->
<view>
  <view>10 + 10={{10 + 10}}</view>
  <view>10 - 5={{10 - 5}}</view>
  <view>10 * 10={{10 * 10}}</view>
  <view>100 / 5={{100 / 5}}</view>
</view>

$\color{#48b885} {7.2.3. 逻辑运算}$

js



//Page Object
Page({
  data: {
    length: 6,
  },
});

Wxml



<!-- 逻辑 -->
<view wx:if="{{length > 5}}">我大于5</view>

$\color{#48b885} {7.2.4. 字符串运算}$

js



//Page Object
Page({
  data: {
    firstName: 'WenQin',
    lastName: 'Zheng',
  },
});

Wxml



<!-- 字符串运算 -->
<view>{{lastName + ' ' + firstName}}</view>

$\color{#48b885} {7.2.5. 注意}$

$\color{#48b885} {7.3. 列表渲染}$

js



// pages/demo04/demo04.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    bookList: [{
      id: 0,
      bookname: '红楼梦'
    }, {
      id: 1,
      bookname: '西游记'
    }, {
      id: 2,
      bookname: '水浒传'
    }, {
      id: 3,
      bookname: '三国演义'
    }, ]
  },

})

wxml



<!-- wx:for -->
<view>
  <!-- 渲染列表 -->
  <view>{{bookList}}</view>
</view>

只能看到 [object Object]....

$\color{#48b885} {7.3.1. wx:for}$

js



// pages/demo04/demo04.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    bookList: [{
      id: 0,
      bookname: '红楼梦'
    }, {
      id: 1,
      bookname: '西游记'
    }, {
      id: 2,
      bookname: '水浒传'
    }, {
      id: 3,
      bookname: '三国演义'
    }, ]
  },

})

wxml 普通for渲染

  

<!-- 渲染列表 -->
  <view>{{bookList}}</view>
  <!-- 列表循环: wx:for="{{数组或者循环对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引" -->
  <view wx:for="{{bookList}}" wx:for-item="item" wx:for-index="index">
    <view>{{item.id}}--{{item.bookname}}</view>
  </view>

wxml 简略for渲染

 

<!-- 列表循环简写,如果只有一层循环,可以省略 wx:for-item="item".wx:for-index="index",wx默认的值就是item 和 index -->
  <view wx:for="{{bookList}}" :key="item.id">
    <view>{{index}}--{{item.bookname}}</view>
  </view>

:key="唯一的值,提高渲染性能"

如果这个数组是个简单数组(1,2,3,4,5)[不嵌套对象的, 必须用 [*this] 作为key]

js



data: {
     numList: [
      1, 2, 3, 4, 5
    ]
}

wxml



<!-- 简单数组的for渲染 -->
  <view>
    <view wx:for="{{numList}}" :key="*this">{{item}}</view>
  </view>

$\color{#48b885} {7.3.2. block}$

block

占位符的标签

写代码的时候,可以看到这标签的存在

页面渲染, 小程序会把他移除

如果不想多一层view标签包裹循环item,block是最佳选择

js



// pages/demo05/demo05.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    numList: [1, 2, 3, 4, 5]
  },

})

html



<!-- block -->
<block wx:for="{{numList}}" :key="*this">
  <view>{{item}}</view>
</block>

确实在开发者工具element‘里没看到block标签

$\color{#48b885} {7.4. 条件渲染}$

$\color{#48b885} {7.4.1. wx:if}$

js wx:if condition 为 true 显示



// pages/demo06/demo06.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    randNum: Math.random()
  },

})

wxml



<!-- wx:if -->
<view>{{randNum}}</view>
<view wx:if="{{randNum>0.5}}">随机数大于0.5了</view>

$\color{#48b885} {7.4.2. hidden}$

只判断一次用wx:if, 频繁显示隐藏用hidden,condition为true是隐藏

js



// pages/demo06/demo06.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    randNum: Math.random()
  },

})

wxml



<!-- wx:hidden -->
<view>{{randNum}}</view>
<view hidden="{{randNum>0.5}}">hidden随机数小于0.5</view>

$\color{#48b885} {8. 事件绑定}$

$\color{#48b885} {8.1. wxml}$

bindtap[绑定点击事件] bindinput[绑定输入事件] bindchange[绑定数据变化事件]

绑定一个输入框,实时显示数据的操作

js



// pages/demo07/demo07.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    inputStr: '',
  },
  handleinput(e) {
    // console.log(e);
    // 普通输出
    console.log(e.detail.value);
    // es6 解构输出
    let {
      value
    } = e.detail
    console.log(value);
    // 赋值给 inputStr
    this.setData({
      inputStr: value
    })
  }


})

wxml



<!-- 事件绑定 -->
<input type="text" bindinput="handleinput" />
<view>{{inputStr}}</view>

$\color{#48b885} {8.2. page}$

js



Page({
// 绑定的事件
handleInput: function(e) {
    console.log(e);
console.log("值被改变了"); }
})

$\color{#48b885} {8.3. 特别注意}$

1 绑定事件不能带参数,不能带圆括号,下面是错误写法



<input bindinput="handleInput(100)" />

2 事件传值,1可以通过data--xx属性传,2可以e.detail.value



<input data-num="100" type="text" bindinput="handleinput" />

3 事件触发时,获取数据



handleInput: function(e) {
    let {
      num
    } = e.target.dataset
    console.log('num', num);
}

写一个计数器,点击+btn就+1,点击-btn就-1

1 写结构,绑定点击事件



<!-- 写一个计数器,点击+btn就+1,点击-btn就-1 -->
<button bindtap="handleAddTap" data-option="{{1}}">+</button>
<button bindtap="handleSubTap" data-opton="{{-1}}">-</button>
<view>{{counter}}</view>

2 js写逻辑,接受传过来的data-option, += option,给data里的counter设置值



// pages/demo09/demo09.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    counter: 0
  },
  handleAddTap(e) {
    let {
      option
    } = e.target.dataset

    // console.log(option);

    this.setData({
      counter: this.data.counter += option
    })
  },
  handleSubTap(e) {
    let {
      option
    } = e.target.dataset

    // console.log(option);

    if (this.data.counter <= 0) {
      return;
    }

    this.setData({
      counter: this.data.counter += option
    })
  }
})

确实能实现计算数的效果

注意点: 想要拿到data里的counter,必须是: this.data.counter

$\color{#48b885} {9. 样式-WXSS}$

wxss文档地址: developers.weixin.qq.com/miniprogram…

wxss新特性

1 响应式的长度单位: rpx

2 样式导入

px

1 设计稿宽 750px

2 750px = 750rpx

3 1px = 1rpx

rpx

1 f12视网膜屏幕设计稿宽 375px

2 1px = 2rpx

3 1rpx = 0.5px

存在一个设计稿宽度 414 或者位置pageWidth

1 设计稿 page 上存在一个view元素, 宽度 100px

2 拿以上的需求,趋势线不同宽度的页面适配

3 page(375) px = 750 rpx [iphone6]

4 1px = 750rpx / page(f12宽度375)

5 100px = 750px * 100 / page(375)

6 假设 page == 375

demo10html



<view>demo10</view>

demo10css



view {
  /* width: 200rpx; */
  height: 200rpx;
  background-color: pink;
  color: white;
  font-size: 30rpx;
  text-align: center;
  line-height: 200rpx;

  width: calc(750rpx * 100 / 375)
}

$\color{#48b885} {9.1. 尺寸单位}$

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

2rpx = 1px

我们要设置某个元素字体大小为18px,那么就是 font-size: 36rpx;

$\color{#48b885} {9.2. 样式导入}$

demo08.wxss



/* 样式导入 */
/* 2rpx等于 1px */

/* 引入colorWhite.wxss */
@import "colorWhite.wxss";

view {
  width: 375rpx;
  height: 375rpx;
  background-color: pink;
}

colorWhite.wxss



view {
  font-size: 50rpx;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

$\color{#48b885} {9.3. 选择器}$

.class

#id

element

element1, element2

::after

::before

$\color{#48b885} {9.4. 小程序中使用less}$

1 安装vscode 插件 Easy less

2 编写settings.json



"less.compile": {
    "outExt":       ".wxss"
}

3 在要编写样式的地方,新建less文件,如index.less ,然后正常编辑即可。

views.less



view {
  .v1 {
    width: 50 / 2 + 'px';
    height: 200rpx;
    background-color: pink;
  }
}

demo11.wxss



@import "views.wxss";

哭,我的less算不出来

原因是这样



width: 400rpx / 2; //运算式不加括号less就不算,原样输出,把我给干蒙了



width: 400rpx / 2;

所以,需要给运算式外层包裹一层括号



width: (400rpx / 2);

确实算出来了



  width: 200rpx;

$\color{#48b885} {10. 常见组件}$

$\color{#48b885} {10.1. view}$

view 块级元素



hover-class	string	none	否	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒	1.0.0
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒

tip: 如果需要使用滚动视图，请使用 scroll-view

$\color{#48b885} {10.2. text}$

$\color{#48b885} {10.2.1. 代码}$

wxml



<!-- 常用组件 -->
<!-- text
属性	类型	默认值	必填	说明	最低版本
selectable	boolean	false	否	文本是否可选 (已废弃)	1.1.0
user-select	boolean	false	否	文本是否可选，该属性会使文本节点显示为 inline-block	2.12.1
space	string ensp(25px)	中文字符空格一半大小	
            emsp (50px)	中文字符空格大小	
            nbsp (20px)	根据字体设置的空格大小		否	显示连续空格	1.4.0
decode	boolean	false	否	是否解码 

tip: decode可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;
tip: 各个操作系统的空格标准并不一致。
tip:text 组件内只支持 text 嵌套。
tip: 除了文本节点以外的其他节点都无法长按选中。
bug: 基础库版本低于 2.1.0 时， text 组件内嵌的 text style 设置可能不会生效。 -->
<view>
  <text user-select space="ensp">今天   天气好</text>
  <text decode>5 &gt; 3 &nbsp; 9&lt;11</text>
</view>

$\color{#48b885} {10.3. image}$

wxml



<!-- image
src	string		否	图片资源地址	1.0.0
mode	string	scaleToFill	否	图片裁剪、缩放的模式	1.0.0
webp	boolean	false	否	默认不解析 webP 格式，只支持网络资源	2.9.0
lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载	1.5.0
show-menu-by-longpress	boolean	false	否	开启长按图片显示识别小程序码菜单	2.7.0
binderror	eventhandle		否	当错误发生时触发，event.detail = {errMsg}	1.0.0
bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}	1.0.0 

mode的合法值:
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素	
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。	
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。	
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变	
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变	2.10.3
top	裁剪模式，不缩放图片，只显示图片的顶部区域	
bottom	裁剪模式，不缩放图片，只显示图片的底部区域	
center	裁剪模式，不缩放图片，只显示图片的中间区域	
left	裁剪模式，不缩放图片，只显示图片的左边区域	
right	裁剪模式，不缩放图片，只显示图片的右边区域	
top left	裁剪模式，不缩放图片，只显示图片的左上边区域	
top right	裁剪模式，不缩放图片，只显示图片的右上边区域	
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域	
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域 

tip：image组件默认宽度320px、高度240px
tip：image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别 -->
<view>图片</view>
<image mode="widthFix" src="../../images/cat.jpg"></image>
<image mode="widthFix" src="../../images/cat.jpg"></image>
<image mode="widthFix" src="../../images/cat.jpg"></image>
<image mode="widthFix" src="../../images/cat.jpg"></image>

wxss



image {
  width: 375rpx;
  height: 300rpx;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 10rpx;
}

$\color{#48b885} {10.4. swiper}$

js



// pages/demo13/demo13.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      'https://img.alicdn.com/imgextra/i2/160/O1CN01IXoJmu1D3K4AmOFRh_!!160-0-luban.jpg',
      'https://gtms04.alicdn.com/tps/i4/TB1pgxYJXXXXXcAXpXXrVZt0FXX-640-200.jpg',
      'https://img.alicdn.com/imgextra/i1/6000000002956/O1CN01yn2seD1XhtSpyHK1k_!!6000000002956-0-lubanimage.jpg'
    ]
  },

})

wxml



<!-- swiper -->
<!-- indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
current	number	0	否	当前所在滑块的 index	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
duration	number	500	否	滑动动画时长	1.0.0 -->
<swiper circular indicator-dots indicator-active-color="orange" autoplay interval="{{2000}}" duration="{{500}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image mode="aspectFill" class="swiper-image" src="{{item}}" />
    </swiper-item>
  </block>
</swiper>

wxss



/* pages/demo13/demo13.wxss */
swiper {
  width: 750rpx;
  height: 400rpx;

  box-sizing: border-box;
  padding: 10rpx;
}
swiper image {
  width: 100%;
  height: 100%;
}

$\color{#48b885} {10.5. navigator}$

wxml



<!-- navigator -->
<navigator url="/pages/demo13/demo13">轮播图</navigator>

$\color{#48b885} {10.6. ritch-text}$

$\color{#48b885} {10.6.1. nodes属性}$

js



// pages/demo14/demo14.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    richData: `<div class="sc-ifAKCX eyLbbH"><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://www.tmall.com/wow/z/heybox/heyboxrax/heybox?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.1&amp;scm=1007.home_icon.tmallxp.d&amp;wh_biz=tm&amp;disableNav=YES"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">天猫新品</p></a><a class="sc-gzVnrw krOjeo" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.6&amp;scm=1007.home_icon.chongzzx.d&amp;_wml_code=Vfw8V4IdfflvFcsPv2fKDCLgFlhCoOQ406ZO9WKS70zNVh2FhuClrYZQHV%2BUj8rweMrPJgOrvqON3zeUHJMIALqc03AQZnf3hmtKmJM2g5PuR9UuzwivVDM%2Bil4nBDGBPXlfSqZZA3CdATGQpVOeZMO8SbyJvaZdoC89%2B2Gg8FZsD4wqDUKs7VcgTjZxbgdE&amp;subSource=stcz_1"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1llI3f4n1gK0jSZKPXXXvUXXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">充值中心</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.2&amp;scm=1007.home_icon.juhs.d&amp;_wml_code=9XZq%2Bt%2FxdGk2vxtkbZvNtxIRr1Fl5o%2F4JYkxzjiABZCkN0X4ug9ejN%2FEA0XumFdlCJmui3oZzrfxu2OjRTO%2FUldTSbERTDFnNVuaq4bGXYarnsLycd1U6o4btoe8H%2FSSeBk5iibFKlpytcA4vdUvH%2BU%2BttvWBrsoV0Txewchwr8%3D"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">今日爆款</p></a><a class="sc-gzVnrw krOjeo" href="https://h5.m.taobao.com/trip/home/index.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.7&amp;scm=1007.home_icon.lvx.d&amp;_wx_tpl=http%3A%2F%2Fh5.m.taobao.com%2Fapp%2Ftriprxhome%2Fpages%2Fhome%2Findex.weex.js&amp;wx_navbar_hidden=true&amp;ttid=12mtb0000155"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1O_AyVwHqK1RjSZFPXXcwapXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">机票酒店</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://pages.tmall.com/wow/z/import/tmg-rax-home/tmallimportHomewupr-index?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.3&amp;scm=1007.home_icon.tmallgj.d&amp;wh_biz=tm&amp;wh_pid=tmg-rax-home%2FtmallimportHome&amp;disableNav=YES"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB19uWKXkCy2eVjSZPfXXbdgpXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">天猫国际</p></a><a class="sc-gzVnrw krOjeo" href="https://market.m.taobao.com/app/tmall-wireless/tjb-2018/index/index.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.8&amp;scm=1007.home_icon.lingjb.d&amp;disableNav=YES#/tjb"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB19yZJVBLoK1RjSZFuXXXn0XXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">金币庄园</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://h5.ele.me/msite/taobaomsiterouter?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.4&amp;scm=1007.home_icon.elm.d"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1DaMyVpzqK1RjSZFoXXbfcXXa-185-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">饿了么</p></a><a class="sc-gzVnrw krOjeo" href="https://market.m.taobao.com/app/pm/new-main/home?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.9&amp;scm=1007.home_icon.paim.d&amp;pha=true&amp;disableNav=YES"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB16ZYDk4n1gK0jSZKPXXXvUXXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">阿里拍卖</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://chaoshi.m.tmall.com/?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.5&amp;scm=1007.home_icon.tmallcs.d2&amp;_ig=shoutao"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1FucwVwHqK1RjSZFgXXa7JXXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">天猫超市</p></a><a class="sc-gzVnrw krOjeo" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.10&amp;scm=1007.home_icon.taobch.d&amp;_wml_code=6WHamsDC%2B8ca9ElMubUiQjsRC0O2j4yGgKPCJIKXglo%3D"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB19dcwVyrpK1RjSZFhXXXSdXXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">淘宝吃货</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://market.m.taobao.com/app/tbsearchwireless-pages/new-catemap/p/s-nx-categories?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.11&amp;scm=1007.home_icon.fenl.d&amp;wh_weex=true"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1nBktVxTpK1RjSZR0XXbEwXXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">分类</p></a><a class="sc-gzVnrw krOjeo" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.12&amp;scm=1007.home_icon.xiany.d&amp;_wml_code=2RLfNbB12QpISV%2BL7aiHZwm5noZrOPbYmjwLhlOAmgeK3XKiEERT7ZdlL5lwWrfH8vrxje8x3wcjpFnTBn2bZuI6VIVmz1Ww1SxKMPNxdKnSxkM02klo1Wq1PvanB8MPDB7%2Fxfoi8vf2ert4z%2BOYjJBMsIILVspKvgSN8SN%2BsCg%3D"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1CoEwVrvpK1RjSZFqXXcXUVXa-185-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">闲鱼</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.13&amp;scm=1007.home_icon.tmallsx.d&amp;_wml_code=uxMdTqOeZt4IfBD8ssl15zR25nV9irif72OvYZHv66PlUxWwFw7AI3Y4j1t%2FGJXQYDZlDvAssH0HSvvBn2twyr3u7MVHWWGQZIVPwerViJM0j60YHvZMcG3JG1ZCBQswmg48wSD9%2BC%2FgFzZX0JcgQenoXJca%2B2FpGgRDcldUh%2F4mrO0cKrXo5rF%2Fsyo7cH7G"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1fcOKXkCy2eVjSZSyXXXukVXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">天猫美食</p></a><a class="sc-gzVnrw krOjeo" href="https://pages.tmall.com/wow/a/act/tmall/dailygroup/18/wupr?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.14&amp;scm=1007.home_icon.88vip.d&amp;wh_pid=daily-186355&amp;disableNav=YES"><img class="sc-htoDjs gRQzSI" src="https://img.alicdn.com/tfs/TB1FyEazAY2gK0jSZFgXXc5OFXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">会员中心</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://pages.tmall.com/wow/yao/20485/aljkmh?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.15&amp;scm=1007.home_icon.alijk.d&amp;wh_biz=tm"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1tikBVAPoK1RjSZKbXXX1IXXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">阿里健康</p></a><a class="sc-gzVnrw krOjeo" href="https://m.duanqu.com?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.16&amp;scm=1007.home_icon.zdxh.d&amp;_ariver_appid=6158543"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1xcTYxFT7gK0jSZFpXXaTkpXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">造点新货</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.17&amp;scm=1007.home_icon.koubsh.d&amp;_wml_code=qeLJPHY5ySO3lef1quOfGhXh%2B8UW1yf1hl95h8wZUjlFlGFkyop3K4Hb%2B95myeqeJT4BYa03LO60S6xd8wO18LZ3%2FVvg2pTGoYLZvdSZu8bbze9cO%2FiQDU%2F6LiQkOXRW6f4DA%2FMN2L81ERi%2Bbsad%2Fk%2BxIGTGkv98p4M7sIG2SpI%3D"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1h1MnVCrqK1RjSZK9XXXyypXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">口碑生活</p></a><a class="sc-gzVnrw krOjeo" href="https://m.duanqu.com?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.18&amp;scm=1007.home_icon.tuhuo.d&amp;_ariver_appid=17570832"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB11tFkr7L0gK0jSZFxXXXWHVXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">土货鲜食</p></a></div></div>`
  },

 
})

wxml



<rich-text nodes="{{richData}}"></rich-text>

$\color{#48b885} {10.7. button}$

$\color{#48b885} {10.7.1. open-type}$

js



// pages/demo15/demo15.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  recvUserInfo(e) {
    console.log(e);
  }


})

wxml



<!-- button -->
<button type="primary" size="mini" open-type="getUserInfo" bindgetuserinfo="recvUserInfo" plain="{{true}}">
  获取用户基本信息
</button>
<!-- e.detail.rowDara就是获取到的数据
  detail:
encryptedData: "su5dR7EG1XdThJqIP7nGxBJT/CcteFUt0YXgH0oPj7XRsfL8z6kac2HLUlLGueAINY+Dl9Wnpg7ZUerAmZmJXwRA+DibjTD4+PaHTR2UK064sduEnGVETL5ocATIqr3pqCr2NpRLVwAYp8rvfyWyUE1UFg1TYXvGZtLPzwyx2Vg00CQquJCNcuIRu5/1lGiRGE9JkVv4VujhzPGHkHvomP2FkvaFzv0WWR2vNC+0N/bnUFlrZb8QWWkwO7FqYlwGNXbHXZLyP5MfdLJAT7V9cfM8NL6SnNAqbPhWAlozHJtSiWmRuKfxnVuEMqQP1t88C2yFy9aLi3VwygSfqa0vjel79ElGUiCFdZi1FypVaQ/fPC1buZKAmevROj6hmESMZ+bIKx0mQWDnr0g3mIwmc4rDi6II7qPig9J2iG5jCIZuOPn8Q23n5EHO779bbRCQ8IXYfGGdq/HNpXJBzq+2/A=="
errMsg: "getUserInfo:ok"
iv: "JUPCI9B8pGnl36UDG2nsWg=="
rawData: "{"nickName":"微信用户","gender":0,"language":"","city":"","province":"","country":"","avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"}"
signature: "b6bab5ee8af8fc6d1906661ef1e9d979ad23dbe8"
因为我们是个人开发者,所以官方返回假的数据给我们 -->

$\color{#48b885} {10.8. icon}$

wxml



<!-- icon -->
<!-- icon
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear	1.0.0
size	number/string	23	否	icon的大小	1.0.0
color	string		否	icon的颜色，同css的color	1.0.0 -->
<icon type="success" size="30"></icon>
<icon type="success" size="40" color="orange"></icon>
<icon type="success" size="50" color="red"></icon>

$\color{#48b885} {10.9. radio}$

js



// pages/demo16/demo16.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    array: [{
        value: 0,
        name: '男'
      },
      {
        value: 1,
        name: '女'
      }
    ]
  },
  handleChange(e) {
    let {
      value
    } = e.detail
    console.log(value);
  }

})

wxml



<!-- radio
value	string		否	radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value	1.0.0
checked	boolean	false	否	当前是否选中	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
color	string	#09BB07	否	radio的颜色，同css的color -->
<!-- 当该radio 选中时，radio-group 的 change 事件会携带radio的value -->
<radio-group bindchange="handleChange">
  <label wx:for="{{array}}">
    <radio value="{{item.value}}" />
    {{item.name}}
  </label>
</radio-group>

$\color{#48b885} {10.10. checkbox}$



<!-- value
value	string		否	checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
checked	boolean	false	否	当前是否选中，可用来设置默认选中	1.0.0
color	string	#09BB07	否	checkbox的颜色，同css的color -->
<checkbox-group bindchange="handleCheckBoxChange">
  <label>
    <checkbox value="0" checked="{{true}}" color="green" />
    星期一
  </label>
  <label>
    <checkbox value="1" checked="{{false}}" color="green" />
    星期二
  </label>
</checkbox-group>

$\color{#48b885} {11. 创建自定义组件}$

$\color{#48b885} {11.1. 创建自定义组件}$

一个组件类似于页面,由于xx.js,xx.json,xx.wxss,xx.wxml

1 新建components文件夹 pages 同级别

2 回到开发者工具,点击components,新建文件夹myHeader,新建component,输入myHeader,自动生成

$\color{#48b885} {11.1.1. 声明组件}$

1 首先需要在组件的json文件中进行自定义组件声明



{
  "component": true,
  "usingComponents": {}
}

$\color{#48b885} {11.1.2. 编辑组件}$

1 编辑zujian

<!-- components/myHeader -->
<view>
  {{innerData}}
  <slot></slot>
</view>

// components/myHeader/myHeader.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    innerData: 'myHeader..'
  },

$\color{#48b885} {11.1.3. 注册组件}$

在组件的js文件中,需要使用Component()来注册组件



// components/myHeader/myHeader.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    innerData: 'myHeader..'
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

$\color{#48b885} {11.2. 声明引入自定义组件}$

使用组件的页面的json


{
  "usingComponents": {
    "my-header":"../../components/myHeader/myHeader"
  }
}

$\color{#48b885} {11.3. 页面中使用自定义组件}$

使用组件的页面wxml


<!-- 使用组件 -->
<my-header>我是my-header插槽内容</my-header>

$\color{#48b885} {11.4. 其他属性}$

$\color{#48b885} {11.5. 定义段与示例方法}$

Component里的属性和方法

properties
data
observers
methods
created
attched
ready
moved
detached

$\color{#48b885} {11.6. 自定义组件传参数}$

父组件通过属性的方式给子组件传递参数

子组件通过事件的方式向父组件传递参数

过程

> 1 父亲 把数据 {{tabs}} 传递到子组件 tabItem 中

> 2 父亲 监听 onMyTab 事件

> 3 子组件触发 bindMyTap 中 mytap事件 

> 4 自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名, detail对象

父传子-传数据props

1 父wxml



<tabs tabItems="{{tabs}}" />

2 子 js



// components/tabs/tabs.js
Component({
  // properties => props
  properties: {
    tabItems: {
      type: Array,
      value: []
    }
},

3 子使用 tabsItem



<block wx:for="{{tabItems}}" wx:key="{{item}}">
   <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
</block>

子传父-发射事件

1 子 wxml



    <block  wx:for="{{tabItems}}" wx:key="{{item}}">
      <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
    </block>

2 子 js methods



  methods: {
    handleItemActive(e) {
      // console.log(e);
      let {
        index
      } = e.target.dataset
      this.triggerEvent('mytap', index);
    }
  }

3 父 wxml



<tabs tabItems="{{tabs}}" bindmytap="onMyTab">
或者
  <tabs tabItems="{{tabs}}" bind:mytap="onMyTab">

4 父 js



// pages/demo17/demo17.js
Page({
  onMyTab(e) {
    // e 是对象,e.detail是传过来的参数值
    console.log(e);
    console.log(e.detail)
  }
})

$\color{#48b885} {12. 小程序生命周期}$

$\color{#48b885} {12.1. 应用生命周期}$

app.js才有的, page和components是没有的

文档地址: developers.weixin.qq.com/miniprogram…

$\color{#48b885} {属性}$	$\color{#48b885} {类型}$	$\color{#48b885} {必填}$	$\color{#48b885} {说明}$
onLaunch	function	否	on: 小程序初始化
onShow	function	否	on: 小程序启动或者切前台
onHide	function	否	on: 小程序切后台
onError	function	否	错误监听函数
onPageNotFound	function	否	页面不存在监听函数

$\color{#48b885} {12.2 页面生命周期}$

page才有的

文档地址: developers.weixin.qq.com/miniprogram…

$\color{#48b885} {属性}$	$\color{#48b885} {类型}$	$\color{#48b885} {说明}$
data	Object	`data` 是页面第一次渲染使用的初始数据。
onLoad	Function	页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
onShow	Function	页面显示/切入前台时触发。
onReady	Function	页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在`onReady`之后进行。详见[生命周期]
onHide	Function	页面隐藏/切入后台时触发。如 wx.navigateTo 或底部 `tab` 切换到其他页面，小程序切入后台等
onUnload	Function	页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时
onPullDownRefresh	Function	监听用户下拉刷新事件需要在`app.json`的`window`选项中或页面配置中开启`enablePullDownRefresh`。可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
onReachBottom	Function	监听用户上拉触底事件。可以在`app.json`的`window`选项中或页面配置中设置触发距离`onReachBottomDistance`。在触发距离内滑动期间，本事件只会被触发一次。
onShareAppMessage	Function	监听用户点击页面内转发按钮（button 组件 `open-type="share"`）或右上角菜单“转发”按钮的行为，并自定义转发内容。
onPageScroll	Function	页面滚动触发事件的处理函数
onResize	Function	小程序屏幕旋转时触发。
onTabItemTap	Function	点击 tab 时触发

diygou8-小程序-基础

1.微信小程序介绍\color{#48b885} {1. 微信小程序介绍} 1.微信小程序介绍

1.1.为什么是微信小程序?\color{#48b885} {1.1. 为什么是微信小程序?} 1.1.为什么是微信小程序?

1.2.微信小程序历史\color{#48b885} {1.2. 微信小程序历史} 1.2.微信小程序历史

1.3.疯狂的微信小程序\color{#48b885} {1.3. 疯狂的微信小程序} 1.3.疯狂的微信小程序

1.4.还有其他平台的小程序,不能忽视\color{#48b885} {1.4. 还有其他平台的小程序,不能忽视} 1.4.还有其他平台的小程序,不能忽视

2.环境准备\color{#48b885} {2. 环境准备} 2.环境准备​

2.1.注册账号\color{#48b885} {2.1. 注册账号} 2.1.注册账号

2.2.获取AppID\color{#48b885} {2.2. 获取AppID} 2.2.获取AppID

2.3.开发者工具\color{#48b885} {2.3. 开发者工具} 2.3.开发者工具

3.第一个微信小程序\color{#48b885} {3. 第一个微信小程序} 3.第一个微信小程序​​

3.1.打开微信开发者工具\color{#48b885} {3.1. 打开微信开发者工具} 3.1.打开微信开发者工具

3.2.新建小程序项目\color{#48b885} {3.2. 新建小程序项目} 3.2.新建小程序项目

3.3.填写项目信息\color{#48b885} {3.3. 填写项目信息} 3.3.填写项目信息​​

3.4.创建成功\color{#48b885} {3.4. 创建成功} 3.4.创建成功​

4.开发工具的使用文档\color{#48b885} {4. 开发工具的使用文档} 4.开发工具的使用文档

5.小程序结构目录\color{#48b885} {5. 小程序结构目录} 5.小程序结构目录

5.1.小程序文件结构和传统Web区别\color{#48b885} {5.1. 小程序文件结构和传统Web区别} 5.1.小程序文件结构和传统Web区别

5.2.基本的项目目录\color{#48b885} {5.2. 基本的项目目录} 5.2.基本的项目目录

6.小程序配置\color{#48b885} {6. 小程序配置} 6.小程序配置

6.1.全局配置app.json\color{#48b885} {6.1. 全局配置app.json} 6.1.全局配置app.json

6.1.1.tabbar使用\color{#48b885} {6.1.1. tabbar使用} 6.1.1.tabbar使用​

6.2.页面配置page.json\color{#48b885} {6.2. 页面配置 page.json} 6.2.页面配置page.json

6.3.sitemap配置(微信内seo优化)\color{#48b885} {6.3. sitemap配置(微信内seo优化)} 6.3.sitemap配置(微信内seo优化)

6.4.小程序开发开始前的技巧\color{#48b885} {6.4. 小程序开发开始前的技巧} 6.4.小程序开发开始前的技巧

7.模版语法\color{#48b885} {7. 模版语法} 7.模版语法

7.1.数据绑定\color{#48b885} {7.1. 数据绑定} 7.1.数据绑定

7.1.1.普通写法\color{#48b885} {7.1.1. 普通写法} 7.1.1.普通写法

7.1.2.组件属性\color{#48b885} {7.1.2. 组件属性} 7.1.2.组件属性

7.1.3.bool类型\color{#48b885} {7.1.3. bool类型} 7.1.3.bool类型

7.2.运算\color{#48b885} {7.2. 运算} 7.2.运算

7.2.1.三元运算\color{#48b885} {7.2.1. 三元运算} 7.2.1.三元运算

7.2.2.算术运算\color{#48b885} {7.2.2. 算术运算} 7.2.2.算术运算

7.2.3.逻辑运算\color{#48b885} {7.2.3. 逻辑运算} 7.2.3.逻辑运算

7.2.4.字符串运算\color{#48b885} {7.2.4. 字符串运算} 7.2.4.字符串运算

7.2.5.注意\color{#48b885} {7.2.5. 注意} 7.2.5.注意

7.3.列表渲染\color{#48b885} {7.3. 列表渲染} 7.3.列表渲染

7.3.1.wx:for\color{#48b885} {7.3.1. wx:for} 7.3.1.wx:for​

7.3.2.block\color{#48b885} {7.3.2. block} 7.3.2.block

7.4.条件渲染\color{#48b885} {7.4. 条件渲染} 7.4.条件渲染

7.4.1.wx:if\color{#48b885} {7.4.1. wx:if} 7.4.1.wx:if

7.4.2.hidden\color{#48b885} {7.4.2. hidden} 7.4.2.hidden

8.事件绑定\color{#48b885} {8. 事件绑定} 8.事件绑定

8.1.wxml\color{#48b885} {8.1. wxml} 8.1.wxml

8.2.page\color{#48b885} {8.2. page} 8.2.page​

8.3.特别注意\color{#48b885} {8.3. 特别注意} 8.3.特别注意

9.样式−WXSS\color{#48b885} {9. 样式-WXSS} 9.样式−WXSS

9.1.尺寸单位\color{#48b885} {9.1. 尺寸单位} 9.1.尺寸单位

9.2.样式导入\color{#48b885} {9.2. 样式导入} 9.2.样式导入

9.3.选择器\color{#48b885} {9.3. 选择器} 9.3.选择器

9.4.小程序中使用less\color{#48b885} {9.4. 小程序中使用less} 9.4.小程序中使用less

10.常见组件\color{#48b885} {10. 常见组件} 10.常见组件

10.1.view\color{#48b885} {10.1. view} 10.1.view

10.2.text\color{#48b885} {10.2. text} 10.2.text

10.2.1.代码\color{#48b885} {10.2.1. 代码} 10.2.1.代码​

10.3.image\color{#48b885} {10.3. image} 10.3.image

10.4.swiper\color{#48b885} {10.4. swiper} 10.4.swiper​

10.5.navigator\color{#48b885} {10.5. navigator} 10.5.navigator

10.6.ritch−text\color{#48b885} {10.6. ritch-text} 10.6.ritch−text

10.6.1.nodes属性\color{#48b885} {10.6.1. nodes属性} 10.6.1.nodes属性​

10.7.button\color{#48b885} {10.7. button} 10.7.button

10.7.1.open−type\color{#48b885} {10.7.1. open-type} 10.7.1.open−type

10.8.icon\color{#48b885} {10.8. icon} 10.8.icon

10.9.radio\color{#48b885} {10.9. radio} 10.9.radio​

10.10.checkbox\color{#48b885} {10.10. checkbox} 10.10.checkbox

11.创建自定义组件\color{#48b885} {11. 创建自定义组件} 11.创建自定义组件

11.1.创建自定义组件\color{#48b885} {11.1. 创建自定义组件} 11.1.创建自定义组件

11.1.1.声明组件\color{#48b885} {11.1.1. 声明组件} 11.1.1.声明组件

11.1.2.编辑组件\color{#48b885} {11.1.2. 编辑组件} 11.1.2.编辑组件

11.1.3.注册组件\color{#48b885} {11.1.3. 注册组件} 11.1.3.注册组件

11.2.声明引入自定义组件\color{#48b885} {11.2. 声明引入自定义组件} 11.2.声明引入自定义组件

11.3.页面中使用自定义组件\color{#48b885} {11.3. 页面中使用自定义组件} 11.3.页面中使用自定义组件

11.4.其他属性\color{#48b885} {11.4. 其他属性} 11.4.其他属性

11.5.定义段与示例方法\color{#48b885} {11.5. 定义段与示例方法} 11.5.定义段与示例方法​​

11.6.自定义组件传参数\color{#48b885} {11.6. 自定义组件传参数} 11.6.自定义组件传参数​

12.小程序生命周期\color{#48b885} {12. 小程序生命周期} 12.小程序生命周期​

12.1.应用生命周期\color{#48b885} {12.1. 应用生命周期} 12.1.应用生命周期​

12.2页面生命周期\color{#48b885} {12.2 页面生命周期} 12.2页面生命周期

12.3页面生命周期图解\color{#48b885} {12.3 页面生命周期图解} 12.3页面生命周期图解

$\color{#48b885} {1. 微信小程序介绍}$

$\color{#48b885} {1.1. 为什么是微信小程序?}$

$\color{#48b885} {1.2. 微信小程序历史}$

$\color{#48b885} {1.3. 疯狂的微信小程序}$

$\color{#48b885} {1.4. 还有其他平台的小程序,不能忽视}$

$\color{#48b885} {2. 环境准备}$

$\color{#48b885} {2.1. 注册账号}$

$\color{#48b885} {2.2. 获取AppID}$

$\color{#48b885} {2.3. 开发者工具}$

$\color{#48b885} {3. 第一个微信小程序}$

$\color{#48b885} {3.1. 打开微信开发者工具}$

$\color{#48b885} {3.2. 新建小程序项目}$

$\color{#48b885} {3.3. 填写项目信息}$

$\color{#48b885} {3.4. 创建成功}$

$\color{#48b885} {4. 开发工具的使用文档}$

$\color{#48b885} {5. 小程序结构目录}$

$\color{#48b885} {5.1. 小程序文件结构和传统Web区别}$

$\color{#48b885} {5.2. 基本的项目目录}$

$\color{#48b885} {6. 小程序配置}$

$\color{#48b885} {6.1. 全局配置app.json}$

$\color{#48b885} {6.1.1. tabbar使用}$

$\color{#48b885} {6.2. 页面配置 page.json}$

$\color{#48b885} {6.3. sitemap配置(微信内seo优化)}$

$\color{#48b885} {6.4. 小程序开发开始前的技巧}$

$\color{#48b885} {7. 模版语法}$

$\color{#48b885} {7.1. 数据绑定}$

$\color{#48b885} {7.1.1. 普通写法}$

$\color{#48b885} {7.1.2. 组件属性}$

$\color{#48b885} {7.1.3. bool类型}$

$\color{#48b885} {7.2. 运算}$

$\color{#48b885} {7.2.1. 三元运算}$

$\color{#48b885} {7.2.2. 算术运算}$

$\color{#48b885} {7.2.3. 逻辑运算}$

$\color{#48b885} {7.2.4. 字符串运算}$

$\color{#48b885} {7.2.5. 注意}$

$\color{#48b885} {7.3. 列表渲染}$

$\color{#48b885} {7.3.1. wx:for}$

$\color{#48b885} {7.3.2. block}$

$\color{#48b885} {7.4. 条件渲染}$

$\color{#48b885} {7.4.1. wx:if}$

$\color{#48b885} {7.4.2. hidden}$

$\color{#48b885} {8. 事件绑定}$

$\color{#48b885} {8.1. wxml}$

$\color{#48b885} {8.2. page}$

$\color{#48b885} {8.3. 特别注意}$

$\color{#48b885} {9. 样式-WXSS}$

$\color{#48b885} {9.1. 尺寸单位}$

$\color{#48b885} {9.2. 样式导入}$

$\color{#48b885} {9.3. 选择器}$

$\color{#48b885} {9.4. 小程序中使用less}$

$\color{#48b885} {10. 常见组件}$

$\color{#48b885} {10.1. view}$

$\color{#48b885} {10.2. text}$

$\color{#48b885} {10.2.1. 代码}$

$\color{#48b885} {10.3. image}$

$\color{#48b885} {10.4. swiper}$

$\color{#48b885} {10.5. navigator}$

$\color{#48b885} {10.6. ritch-text}$

$\color{#48b885} {10.6.1. nodes属性}$

$\color{#48b885} {10.7. button}$

$\color{#48b885} {10.7.1. open-type}$

$\color{#48b885} {10.8. icon}$

$\color{#48b885} {10.9. radio}$

$\color{#48b885} {10.10. checkbox}$

$\color{#48b885} {11. 创建自定义组件}$

$\color{#48b885} {11.1. 创建自定义组件}$

$\color{#48b885} {11.1.1. 声明组件}$

$\color{#48b885} {11.1.2. 编辑组件}$

$\color{#48b885} {11.1.3. 注册组件}$

$\color{#48b885} {11.2. 声明引入自定义组件}$

$\color{#48b885} {11.3. 页面中使用自定义组件}$

$\color{#48b885} {11.4. 其他属性}$

$\color{#48b885} {11.5. 定义段与示例方法}$

$\color{#48b885} {11.6. 自定义组件传参数}$

$\color{#48b885} {12. 小程序生命周期}$

$\color{#48b885} {12.1. 应用生命周期}$

$\color{#48b885} {12.2 页面生命周期}$

$\color{#48b885} {12.3 页面生命周期图解}$