# Part3-UniApp项目实战
### 一、前端开发痛点分析【了解】
作为前端，我们知道，很多时候公司的APP、小程序、H5-SPA的结构和样式都是一致的，但我们就必须要写好几套代码来开发同样的应用，这就增大了我们前端的工作量。因此，你需要一个框架，来帮助你适配目前市场上较为热门的所有平台，这个框架，就是：uni-app。
### 二、Uniapp简介【了解】
官网地址：
`uni-app` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
[](https://tva1.sinaimg.cn/large/008eGmZEly1gopnmznl4mj30x20hvdkr.jpg)
### 三、创建与运行项目【熟悉】
具体操作参考：
我们创建一个名为 `daily` 的小程序项目：
[](https://tva1.sinaimg.cn/large/008eGmZEly1gopnn1qs7fj30mz0fuwg6.jpg)
点击 `创建`，即可创建项目。
点击工具栏的 `运行 > 运行到浏览器/运行到小程序模拟器` 进行测试。
这里注意，第一次运行到小程序时，会有这个报错：
[](https://tva1.sinaimg.cn/large/008eGmZEly1gopnn0kx2wj31f00egaep.jpg)
这里已经讲得很清楚了，你要去微信小程序开发工具，根据这个提示修改：
[](https://tva1.sinaimg.cn/large/008eGmZEly1gopnn15be7j30kg0gjgm5.jpg)
然后关闭微信小程序开发工具，重新在HBuilder中运行项目到小程序：
[](https://tva1.sinaimg.cn/large/008eGmZEly1gopnmyc4rpj31fz0suwmu.jpg)
可以看到，我们已经同时在两个平台跑起了一套代码。
### 四、项目资源【重点】
#### 1、项目参考地址
（移动端）
#### 2、接口地址
uniapp叩丁狼商城【uniapp-积分商城接口】链接： 密码：zhaowenxian
#### 3、蓝湖
本项目的设计图已部署到蓝湖平台，该平台是前端与设计、产品协同办公的常用平台。
平台地址：
请各位同学进入该网址并注册登录。
**这里提供设计稿链接：**
链接: 密码: 1nc0
### 五、开发注意【了解】
#### 1、图片等资源无法正常显示？
将这些静态资源放入项目根目录下的 `static` 中即可。
#### 2、iconfont使用
uniapp在开发时，使用iconfont后，为了支持微信小程序端iphone打开能兼容，需要把字体图标下载下来。但是我们需要修改 `iconfont.css` ：
```
@font-face {
font-family: "iconfont";
src: url('~@/iconfonts/iconfont.eot?t=1598233615452'); /* IE9 */
src: url('~@/iconfonts/iconfont.eot?t=1598233615452#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAScAAsAAAAACPQAAARPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqFBIQ5ATYCJAMUCwwABCAFhG0HVRvSB8geg207eRxWkXSS1lL/EXw/1vZ9uTtMGyTRSPfpJBFJhERjSNASlU6odA8dpnKzBapJXVJTR04MCWmKh1Q8VMzO3OF1Iva8oQj5Dy6nvxoa2DzLcllz0poYYBxQYHvzAinQAkqUG8ZuIg/yPIF2owLRVrMLmcBAAaYF4hbHuMAgYVQqaKGlaRSsLeIZVK30SL8DgCfv+/ELwsOApGZg7tp5lgCkfhh/vMygtJRdigDRcHYom8iYAxTirtB5ixEk5zC0W7/TsQho15KkD+P3lh99Pl7WarGlG1K3wz88iiwJogEoOwXSoqIcnAgLI5UlzyHz5aOXeNVlXnwtykrXtKOJNwBiGAD1mKeK477hUKaFtaG9b+PTpyzqCXNHn79aTdNoOP1Pk85rGvusXKZt2F6TcL/t9Jx/0NSWmUlr1nImtKT236WG+iaoSbjLedAmdfaVJ8jGp1nXNR7wtC3H/sQTkOAVVoqPPVI9jum/a183Zg3P3JFkYi6q/T6sGH9Aft972x59SD1QqtR9T6in/Zrl1Jk+f/YTqE8NqCoNtf/pHoBisnY2zp3zZrPnTnlvOWHH5Pj0VjMb7VnMmUX7ndd9OKyt8Nb7HDZn93q/y3ATfXg3rRs79e5EqypRRXi+DaN1p3Ob6IHZSFsbfgEQsbTWaONzOyznV1yarvFNTCk5XaDUpdaSRd7lNkvr26KRrNPaMrcgw9uWdwyzAW/TINO/LT81dUNRsYNDUdHGtGiT6g3FmpioMPdN9YWKizcUDhp5LmeVMeXudq253Y6/TeW22kYYUpkG9niiTeGal4xQYtjXpmikRi6YOrSssWEfUu6n+/wMsY8Ip23YwIzDMusjli2LbOjmeYwX6rsb9PeMaMjE4io2bDQDqQk8lHVq4kYeX+1VjfQfqz2/IbTYQZA0uXzj24FD+trowcuZF2/fr/jCybZRcHRSjd7P3LF4AeoA/P/Luxkw5Ff6f3Xyj9xD12r//hXdfP+vXKftZQ5ba5r4rwUX8I4nmXrSZkovXKWx6M/QF1oFUmpLgKkWswnzG40QqG4wOHfiJ2j6H7z9ng+jHbrX6dAyFEHSNGLPWraIRwtpDqoO89DQsgDtZuVs7jCAwBClDTM6OQi99kPS7RWyXnfRQnoG1bBv0NAbDGi3HpZ7dpgIHMogUC6JChBePYLzZVIhspCQn1+OYtViLhGXeHQ2SijxCBIWHJrO5KBSlBhigbIGCydJISIkZBIkm7sMFYtliJyQVaF8MriSJOXxISHCoicF82USAFlBQHGRUAIInnoIHJ+MlJB2J0GZz5dDYaqJcREVbS1uNhRBCe8fESZYaAM0Rylt1HYpg5VqYMKRSEJxkhBBRgKRzdtRYpiUQciLR1VB8ZGCVXaIy8ULEToJmyqDp1dL7nEPtAO3qJEiR4kaDfUIr8OlcGhomIAr5VeiQeF6SpRLBHEjvkwsPmb+CQWCeAAAAA==') format('woff2'),
url('~@/iconfonts/iconfont.woff?t=1598233615452') format('woff'), url('~@/iconfonts/iconfont.ttf?t=1598233615452') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('~@/iconfonts/iconfont.svg?t=1598233615452#iconfont') format('svg'); /* iOS 4.1- */
}
```
参考地址：[https://uniapp.dcloud.io/frame?id=%e5%ad%97%e4%bd%93%e5%9b%be%e6%a0%87](https://uniapp.dcloud.io/frame?id=%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87)
并且引入css的标准方式为：
```
@import url('./iconfonts/iconfont.css');
```
参考地址：[https://uniapp.dcloud.io/frame?id=css%e5%bc%95%e5%85%a5%e9%9d%99%e6%80%81%e8%b5%84%e6%ba%90](https://uniapp.dcloud.io/frame?id=css%E5%BC%95%E5%85%A5%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90)
#### 3、沉浸式状态栏只想在小程序显示，H5页面不想显示？
官网地址：
官网写得还是比较晦涩的，具体用法：
在 `pages.json` 中：
```
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"h5": {
"titleNView": false
}
}
}
]
}
```
#### 4、uniapp的子传父
官网地址：
代码：
子组件：
```
methods: {
blockShow(arg){
uni.$emit('blockshow', arg);
}
}
```
父组件：
```
onReady(){
uni.$on('blockshow', function(arg){
console.log(arg)
})
},
```
#### 5、适配底部安全区域
参考文档：
参考上文的ios方案二。
在 `mainfest.json` 中的：
```
"mp-weixin": {
"appid": "wxa8af95b397052766",
"setting": {
"urlCheck": false
},
"safearea": { //安全区域配置，仅iOS平台生效
"background": "#CCCCCC", //安全区域外的背景颜色，默认值为"#FFFFFF"
"bottom": { // 底部安全区域配置
"offset": "auto" // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none"
}
},
"usingComponents": true
},
```
在需要适配底部安全区域的页面中：
```
.index_page {
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
```
### 六、uniapp中使用vuex【了解】
由于uni-app已经内置了vuex，所以只要正确引入就好了。
1、在项目的根目录下，**创建一个名为store的文件夹**然后在该文件夹下创建一个**index.js**的js文件 2、在该js文件下定义公共的数据以及方法函数，并且把它导出
```
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {},
mutations: {},
actions: {}
})
export default store
```
3、在入口文件即：**main.js**挂载vuex
```
import Vue from 'vue'
import App from './App'
//引入vuex
import store from './store'
//把vuex定义成全局组件
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App,
//挂载
store
})
app.$mount()
```
4、在单页面里使用vuex
```
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://gb.akanote.cn/wechat/part3uniapp-xiang-mu-shi-zhan.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.