> For the complete documentation index, see [llms.txt](https://gb.akanote.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gb.akanote.cn/wechat/part3uniapp-xiang-mu-shi-zhan.md).
# 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
```
```