uni-app 学习笔记

桃扇骨 2022-09-12 11:45 459阅读 0赞

### 文章目录 ###

*  1. uni-app 基础
 *   *  1.1 什么是uni-app
     *  1.2 uni-app的优点
 *  2. uni-app 实战
 *   *  2.1 网络请求
     *  2.2 模板语法
     *  2.3 打开页面
     *  2.4 页面传参
     *  2.5 模拟直达效果
     *  2.6 创建tabBar
     *  2.7 引入组件
     *  2.8 子父组件传值
     *  2.9 使用微信云开发
     *  2.10 rich-text 显示富文本
     *  2.11 web-view 实现嵌套网页
     *  2.12 使用watch监听状态变化
     *  2.13 微信登录
 *  3. 生产发布
 *   *  3.1 发布到微信小程序

# 1. uni-app 基础 #

[官方文档][Link 1]

## 1.1 什么是uni-app ##

*  `uni-app`是一个使用`Vue.js`语法来开发所有前端应用的框架（也称之为全端开发框架）
 *  开发者编写一套代码，可发布到`iOS`、`Android`、`Web`（响应式）、以及各种`小程序`（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、`快应用`等多个平台。
 *  技术栈：`JavaScript`，`vue`， `微信小程序`， `uni-app`

## 1.2 uni-app的优点 ##

`uni-app`在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势

1.跨平台、平台能力不受限

2.运行体验更好

*  组件、api与微信小程序一致
 *  兼容`weex`原生渲染

3.通用技术栈，学习成本更低

*  `vue`的语法、微信小程序的api
 *  内嵌`mpvue`

4.开放生态，组件更丰富

*  支持安装第三方包
 *  支持微信小程序自定义组件及`SDK`
 *  兼容`mpvue`组件及项目
 *  App段支持和原生混合编码
 *  `DCloud`将发布插件市场

# 2. uni-app 实战 #

## 2.1 网络请求 ##

1.在页面`onLoad`中调用请求函数，会在页面加载完成后调用。

2.请求前调用`uni.showLoading`方法

3.请求成功调用`uni.hideLoading()`方法

data() { 
    			return { 
    				news: []
    			}
    		},
    		onLoad() { 
    			uni.showLoading({ 
    				title:"加载中...."
    			});
    			uni.request({ 
    				url: 'https://unidemo.dcloud.net.cn/api/news',
    				method: 'GET',
    				data: { },
    				success: res => { 
    					this.news = res.data;
    					uni.hideLoading();
    				},
    				fail: () => { },
    				complete: () => { }
    			});
    		},

## 2.2 模板语法 ##

`v-for` 循环dom元素  
`@tap` 绑定dom元素在小程序上的点击事件  
`:src`启用双向数据绑定  
`{ {item.title}}` 模板语法

<view class="uni-list">
    			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key='index'
    				@tap="openInfo" :data-postId="item.post_id">
    				<view class="uni-media-list">
    					<image class="uni-media-list-logo" :src="item.author_avatar"></image>
    					<view class="uni-media-list-body">
    						<view class="uni-media-list-text-top">{ { item.title}}</view>
    						<view class="uni-media-list-text-bottom uni-ellipsis">{ { item.created_at}}</view>
    					</view>
    				</view>
    			</view>
    		</view>

## 2.3 打开页面 ##

1.首先在`pages.json`创建新页面的路由

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{ 
    			"path": "pages/index/index",
    			"style": { 
    				"navigationBarTitleText": "news"
    			}
    		},
    		{ 
    			"path": "pages/info/info",
    			"style": { 
    				"navigationBarTitleText": "info"
    			}
    		}
    	],

2.编写跳转事件`openInfo`

methods: { 
    			openInfo() { 
    				uni.navigateTo({ 
    					url: '../info/info'
    				});
    			}
    		}

3.在元素上绑定`@tap`点击事件

## 2.4 页面传参 ##

1.在元素上传递指定参数

2.在跳转事件上封装参数

// 传递一个event事件，来获取元素上的数据
    			openInfo(e) { 
    				let postid = e?.currentTarget?.dataset?.postid || '';
    				console.log(postid);
    				// 通过url拼接来传递参数
    				uni.navigateTo({ 
    					url: '../info/index?postid=' + postid,
    				});
    			}

3.在跳转页获取参数，通过props来获取

onLoad(props) { 
    			if (props?.postid) { 
    				uni.request({ 
    					url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + props?.postid,
    					method: 'GET',
    					data: { },
    					success: res => { 
    						this.newitem = res.data
    					},
    					fail: () => { },
    					complete: () => { }
    				});
    			}
    		}

## 2.5 模拟直达效果 ##

在pages.json中配置condition，可以在开发环境下每次修改项目直达指定的页面。

1.配置pages.json

"condition": {  //模式配置，仅开发期间生效
    	    "current": 0, //当前激活的模式（list 的索引项）
    	    "list": [
    	        { 
    	            "name": "test", // 模式名称
    	            "path": "pages/info/info", // 启动页面，必选
    				"query":"postid=5310906" // 启动参数，在onLoad中获取
    	        }
    	    ]
    	}

2.ctrl+r运行到test页面。  
![在这里插入图片描述][247e3f3d5e1c4fc2a07bc3f930878918.png]

3.在模拟器上开启test模式。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZm1rMTAyMw_size_20_color_FFFFFF_t_70_g_se_x_16]

## 2.6 创建tabBar ##

在`pages.json`文件中设置`tabBar`属性即可生成tabBar

"tabBar": { 
    		"color": "#7A7E83",
    		"selectedColor": "#007AFF",
    		"borderStyle": "black",
    		"backgroundColor": "#F8F8F8",
    		"list": [{ 
    				"pagePath": "pages/home/index",
    				"iconPath": "static/tabBar/home.png",
    				"selectedIconPath": "static/tabBar/home-blue.png",
    				"text": "主页"
    			},
    			{ 
    				"pagePath": "pages/blog/index",
    				"iconPath": "static/tabBar/document.png",
    				"selectedIconPath": "static/tabBar/document-blue.png",
    				"text": "博客"
    			}, { 
    				"pagePath": "pages/resume/index",
    				"iconPath": "static/tabBar/user.png",
    				"selectedIconPath": "static/tabBar/user-blue.png",
    				"text": "简历"
    			}, { 
    				"pagePath": "pages/git/index",
    				"iconPath": "static/tabBar/github-fill.png",
    				"selectedIconPath": "static/tabBar/github-fill-blue.png",
    				"text": "Git"
    			}
    		]
    	}

## 2.7 引入组件 ##

1.传统vue组件，需要`安装`、`引用`、`注册`，三个步骤后才能使用组件。

// 引入方式统一以下面这种,只更换解构部分
    	import { 
    		uniSearchBar
    	} from '@dcloudio/uni-ui'
    
    	export default { 
    		// 引入后进行组件注册,即可使用
    		components: { 
    			uniSearchBar
    		},
    	}

2.`easycom`将其精简为一步。 只要组件安装在项目的`components`目录下，并符合`components/组件名称/组件名称.vue`目录结构。就可以不用引用、注册，直接在页面中使用。

## 2.8 子父组件传值 ##

1.父组件通过强制数据绑定将自身的值传递给子组件。

2.子组件通过props来获取父组件传递的值

export default { 
    		props: { 
    			news: [],
    		},
    	}

3.子组件调用父组件的方法

// 父组件传递confirm给子组件
    <YgSearchBar style="width: 100%;" placeholder="请输入搜索内容" @confirm='getCloudBlogList'/>
    
    // 子组件通过this.$emit调用
    this.$emit('confirm', e)

## 2.9 使用微信云开发 ##

1.在`app.js`里面进行云开发的环境配置

onLaunch: function() { 
    			wx.cloud.init({ 
    				// env 参数说明：
    				// env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
    				// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
    				// 如不填则使用默认环境（第一个创建的环境） 
    				//env: '你的环境ID',
    				env: 'wx-yoga',
    				traceUser: true,
    			})
    		},

2.查询表中所有数据

// 获取云服务数据的方法
    			getCloudBlogList() { 
       				// 连接数据库
    				const db = wx.cloud.database();
    				// 执行查询操作
    				db.collection('blog').get({ 
    					success: res => { 
    						console.log(res.data);
    						this.news = res.data;
    					}
    				});
    			},

3.通过关键字进行模糊查询

db.collection('blog').where({ 
    						//使用正则查询，实现对搜索的模糊查询
    						title: db.RegExp({ 
    							regexp: e.value,
    							//从搜索栏中获取的value作为规则进行匹配。
    							options: 'i',
    							//大小写不区分
    						})
    					}).get({ 
    						success: res => { 
    							console.log(res.data);
    							this.blogList = res.data;
    							uni.hideLoading();
    						}
    					})

4.上传文件图片

## 2.10 rich-text 显示富文本 ##

显示`markDown`文件可以先将`morkDown`文件转换成`html`格式，再通过`uni-app`自带的`rich-text`显示

<rich-text :nodes="newitem.content"></rich-text>

## 2.11 web-view 实现嵌套网页 ##

`web-view` 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

<web-view :src="newitem.content"></web-view>

## 2.12 使用watch监听状态变化 ##

watch: { 
    			tabIndex: { 
    				handler(v) { 
    					this.confirm();
    				},
    				deep: true
    			}
    		},

## 2.13 微信登录 ##

1.使用 `uni.getUserInfo` 获取得到的 userInfo 为匿名数据，建议使用 `uni.getUserProfile` 获取用户信息。

<button class="sys_btn" @click="appLoginWx">小程序登录授权</button>

2.使用`uni.getUserInfo`获取基本信息

uni.getUserProfile({ 
    					desc: 'weixin',
    					success: function(infoRes) { 
    						console.log(infoRes)
    						_this.userInfo = infoRes.userInfo;
    						_this.isCanUse = false;
    						uni.setStorageSync('isCanUse', false); //记录是否第一次授权 false:表示不是第一次授权
    						uni.hideLoading()
    					},
    					fail(res) { 
    						uni.showToast({ 
    							title: "微信登录授权失败",
    							icon: "none"
    						});
    						uni.hideLoading()
    					}
    				});

3.使用`uni.setStorageSync(KEY,DATA)`缓存登录信息

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步api。

uni.setStorageSync('isCanUse', false); //记录是否第一次授权 false:表示不是第一次授权

# 3. 生产发布 #

## 3.1 发布到微信小程序 ##

1.配置AppID  
AppID在小程序开发页面中的开发者设置中查看  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZm1rMTAyMw_size_20_color_FFFFFF_t_70_g_se_x_16 1]

2.打开微信开发者工具，在工具栏找到上传，填写版本号，发布。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZm1rMTAyMw_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
3.上传成功之后，可以打开微信开发者管理后台，现在可以看到开发者的版本  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZm1rMTAyMw_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
4.然后指定小程序的主入口页，主要参照pages.json属性值pages数组的第一项的值

[Link 1]: https://uniapp.dcloud.io/
[247e3f3d5e1c4fc2a07bc3f930878918.png]: /images/20220828/800434a3837548b1881dd1f5eee11d22.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZm1rMTAyMw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/0b0b1a35565f4261a5440b789871db0e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZm1rMTAyMw_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/085371fd0e004efba5fa96c4b1990147.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZm1rMTAyMw_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/b54748b576944582ba18d0139801664d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAZm1rMTAyMw_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/f3535927ab3a4086ad43009ae2939d30.png