Part3-UniApp项目实战

一、前端开发痛点分析【了解】

作为前端，我们知道，很多时候公司的APP、小程序、H5-SPA的结构和样式都是一致的，但我们就必须要写好几套代码来开发同样的应用，这就增大了我们前端的工作量。因此，你需要一个框架，来帮助你适配目前市场上较为热门的所有平台，这个框架，就是：uni-app。

二、Uniapp简介【了解】

官网地址：https://uniapp.dcloud.io/

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

三、创建与运行项目【熟悉】

具体操作参考：https://uniapp.dcloud.io/quickstart

我们创建一个名为 daily 的小程序项目：

点击 创建，即可创建项目。

点击工具栏的 运行 > 运行到浏览器/运行到小程序模拟器 进行测试。

这里注意，第一次运行到小程序时，会有这个报错：

这里已经讲得很清楚了，你要去微信小程序开发工具，根据这个提示修改：

然后关闭微信小程序开发工具，重新在HBuilder中运行项目到小程序：

可以看到，我们已经同时在两个平台跑起了一套代码。

四、项目资源【重点】

1、项目参考地址

http://codesohigh.com/jifenstore/ （移动端）

2、接口地址

uniapp叩丁狼商城【uniapp-积分商城接口】链接：http://xiaoyaoji.cn/project/1aFuiku0kts/share/1kvphJpF8Hg 密码：zhaowenxian

3、蓝湖

本项目的设计图已部署到蓝湖平台，该平台是前端与设计、产品协同办公的常用平台。

平台地址：https://lanhuapp.com/

请各位同学进入该网址并注册登录。

这里提供设计稿链接：

链接: https://pan.baidu.com/s/1hb-WBP_QGqYPSuufx3io6g 密码: 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

并且引入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

3、沉浸式状态栏只想在小程序显示，H5页面不想显示？

官网地址：https://uniapp.dcloud.io/collocation/pages?id=h5

官网写得还是比较晦涩的，具体用法：

在 pages.json 中：

 {     
  "pages": [         
    {             
      "path": "pages/index/index",             
      "style": {                 
        "navigationBarTitleText": "首页",                 
        "h5": {                     
          "titleNView": false                 
        }             
      }         
     }     
   ] 
  }

4、uniapp的子传父

官网地址：https://uniapp.dcloud.net.cn/api/window/communication?id=emit

代码：

子组件：

 <image src="/static/images/logo.png" @tap="blockShow(1)"></image> ​ 
 
 methods: {     
   blockShow(arg){         
     uni.$emit('blockshow', arg);     
   }   
 }

父组件：

 onReady(){     
   uni.$on('blockshow', function(arg){         
     console.log(arg)     
   }) 
 },

5、适配底部安全区域

参考文档：https://ask.dcloud.net.cn/article/35564

参考上文的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

<script>
    export default {
        created () {
            console.log(this.$store)
        }
    }
</script>