# uniapp 微信小程序

# 1. 页面构成

1. index.js 页面脚本文件
2. index.json 页面配置文件
3. index.wxml 页面模板结构文件
4. index.wxss 页面样式文件

# 2. 常用组件

text：文字展示：selectable 可以长按选中文字

1

<text selectable>1330303</text>

rich-text: 将 html 原始标签渲染为 ui 结构（服务器返回 html 结构时使用）

1

<rich-text node="<a>666</a>"></rich-text>

button:

opentype: 可以调用很多微信的开放 API，如（客服转发获取用户授权）

image：主要就是 mode 和 onlongpress (宽高比保持，控制长按弹出菜单，)

# 3.API

1. 以 on 开头的用来监听某些事件的变化

2. 同步 API

以 Sync 结尾的 API 是同步 API, 执行错误会抛出异常

3. 异步 API

有回调函数的 API (faild,success,complete)

# 4. 事件绑定

bindtap,bindchange,bindinput

# 5.wxss 和 css 的区别

wxss 比 css 多一个 rpx 尺寸单位和 @import (' 样式文件导入 ')

# 6. 页面常用配置项

1. 导航栏

navigationBarTitleText 导航栏标题文字内容

navigationBarBackgroundColor 导航栏背景色

navigationBarTextStyle 导航栏文字样式

2. 窗口配置

backgroundColor 背景颜色

backgroundTextStyle 下拉 loding 样式

3. 窗口事件

enablePullDownRefresh 全局下拉刷新

onReachBottomDistance 页面上拉触底时距页面底部距离，单位 px, 默认 50

# 7.tabbar

1
2
3
4

"pagePath":      "pages/index/index",//组件地址
				"iconPath": "static/images/zq.png",//默认图片
				"selectedIconPath": "static/images/zq.png",//选中图片
				"text": "首页" //文字

# 8. 页面跳转的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1.声明式导航
<navigator url="/ll" open-type="navigate"></navigator>//默认
<navigator url="/ll" open-type="navigateBack" deltal="1"></navigator>//返回一级
2.编程式导航
wx.navigatorTo({
url:'',
success:()
faild:()
})
wx.navigateBack({
url:'',
success:()
faild:()
})
wx.switchTo()//跳转底部导航

# 9. 下拉刷新

1. 全局开启下拉刷新

1
2

"enablePullDownRefresh": true,//开启
"onReachBottomDistance": 100//距离

2. 局部组件开启下拉刷新

1
2
3
4
5
6
7
8

"enablePullDownRefresh": true,//开启
"onReachBottomDistance": 100//距离
onPullDownRefresh(()=>{
		console.log("刷新成功")
		获取数成功后停止下拉刷新
		wx.stopPullDownRefresh()
	})
	

3. 开启上拉触底

1
2

import {onLoad,onReachBottom} from "@dcloudio/uni-app"
上拉触底加载数据

4.wxs 模块使用

内联

1
2
3
4
5
6
7
8

<view>{{t1.a}}</view>
<wxs module="t1">
var a=1000;
module.exports={
  a:a
}

</wxs>

外链

1
2
3
4
5
6
7
8
9
10
11
12

page(
<view>{{t1.toUpper('abc')}}</view>
<wxs src="../../utils/tools.wxs" module="t1"/>
)
.wxs(
function toUpper(str){
  return str.toUpperCase()
}
module.exports={
  toUpper:toUpper
}
)

与 js 区别和使用注意事项

1.wxs 定义的方法在不能作为标签属性的事件回调

2. 隔离性：不能调用 js 中定义的方法和参数，不能使用小程序提供的 API

3.ios 性能比 js 好

5.properties (小程序)=>props（Vue）

6. 小程序如何实现数据监听

1
2
3
4
5
6

原始是：observers:{
	"n,m":function(enw,news){
	
	}
}
Vue中可以使用：watch和computed

7. 纯数据字段：1. 既不会显示在页面，也不会被其他组件使用的数据就叫纯数据字段

1

在页面的options字段里定义pureDataPattern的值为正则，表示符合正则的data中的key就是纯数据字段

8. 小程序的生命周期函数

1
2
3
4
5
6

created:组件刚刚被创建时执行：还不能调用this.setData()
attached:组件实例进入页面节点树时执行:组件数据已经初始化完毕，可以发送请求
ready:组件视图层布局完毕后触发
moved：组件实例被移动时触发
detached：组件实例被移除时触发：清除全局变量定时器等
error:组件发生错误时执行

9. 组件选择器：获取组件实例

1

this.selectComponent("#id/.class")

10. 代码共享 behaviors 代码共享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

用于共享数据的API
定义：
export default Behavior({
  data:{
      obj:{
        name:"摄影",
        tools:{
          apk:"佳能",
          price:2000
        }
      }
  },
  methods:{
    buy:function(){
      this.name="蛇鼠一窝"
    }
  }
})

再页面使用

1
2
3
4
5
6
7
8
9
10

<template>
	<view>
		{{name}}
	</view>
</template>

<script>
	import bHaviors from '../../behaviors/idenx'
	export default {
		behaviors:[bHaviors],

Vant Ui

官网：https://vant-ui.github.io/vant/#/zh-CN

初始化包管理文件：在项目根目录打开 cmd 初始化包管理文件

1

npm init -y

在 HB / 微信开发者工具中打开控制台安装 vant

1
2
3
4
5
6
7
8
9

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

复制 node_modules/vant/dist

新建 minprogram 并复制到该文件下重命名为 vant

在 app.vue 中引入全局样式

1

@import '/wxcomponents/vant/common/index.wxss'

在 pages.json 中可以在页面配置文件下局部引入或者 globalstyle 中全局引入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

局部引入

pages:[
  {
  "path": "pages/index/index",
  "style": {
  "navigationBarTitleText": "uni-app"
  },
  "usingComponents": {
  "van-button":"/wxcomponents/vant/button/index"
  }		
  },
]
//全局引入
"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents": {
			"van-button":"/wxcomponents/vant/button/index"
		}
	},

在页面中使用

1

<van-button>按钮</van-button>

其他组件引入方式参考官网 https://vant-ui.github.io/vant-weapp

定制主题：在根目录创建 app.css 文件用来写全局样式

在 Vant 官网定制主题可以拿到各个类型组件的样式变量

根据样式变量修改全局主题样式

1
2
3
4
5
6

page {
  --button-border-radius: 10px;
  --button-default-color: #f2f3f5;
  --toast-max-width: 100px;
  --toast-background-color: pink;
}

其他方式定制主题参考官网：https://vant-ui.github.io/vant-weapp/#/theme

小程序 API Promise 化

下载

1

npm i --save miniprogram-api-promise

引入 app.js/main.js 微信小程序安装后需要重新构建 npm

1
2
3

import {promisifyAll}from 'miniprogram-api-promise'
let wxp=wx.p=[]
promisifyAll(wx,wxp)

使用：

1
2
3

wx.p.request({
					url:"https://baidu.com/"
				})

返回结果：

1

Promise {<pending>}

可以有效避免地狱回调

全局数据共享：Vuex/mobx

和 Vue 使用方法一样参考：Vuex 的使用

分包 -- 独立分包

在分包基础上，在配文件 pages.json 中添加：

1

"independent":true

分包预加载（大小不能超过 2M）

1
2
3
4
5
6

preloadRule:{
"pages/index/index":{//触发的页面
	"network":"all",//下载方式
	"package":['packageA']//预加载哪些分包
}
}