uniapp项目

目录

一、HBuilder创建项目

二、引入uView

2.1 npm方式安装

2.2 下载方式安装

三、小程序的分包

三、App.vue中的生命周期

四、工具封装

五、api接口请求封装

六、store

七、加载顺序

八、flex的使用

---

一、HBuilder创建项目

文件--新建--项目--默认模板--Vue2--创建

二、引入uView

两种引入方式：npm、下载

2.1 npm方式安装

2.1.1  sass

   

    

     

      

     
     

      

       /
       / 安装sass
      
     
    

     

      

     
     

      

       npm i sass -D
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       /
       / 安装sass-loader，注意需要版本
       10，否则可能会导致vue与sass的兼容问题而报错
      
     
    

     

      

     
     

      

       npm i sass-loader@
       10 -D
      
     
   

2.1.2  下载

   

    

     

      

     
     

      

       /
       / 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
      
     
    

     

      

     
     

      

       /
       / npm init -y
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       /
       / 安装
      
     
    

     

      

     
     

      

       npm install uview-ui@
       2.0.31
      
     
   

2.1.3 引入uView主JS库

在项目src目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

   

    

     

      

     
     

      

       /
       / main.js
      
     
    

     

      

     
     

      

       import uView 
       from 
       "uview-ui";
      
     
    

     

      

     
     

      

       Vue.
       use(uView);
      
     
   

2.1.4 在引入uView的全局SCSS主题文件

在项目src目录的uni.scss中引入此文件。

   

    

     

      

     
     

      

       /
       * uni.scss 
       *
       /
      
     
    

     

      

     
     

      

       @import 
       'uview-ui/theme.scss';
      
     
   

2.1.5引入uView基础样式

注意！   在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

   

    

     

      

     
     

      

       <style lang
       =
       "scss"
       >
      
     
    

     

      

     
     

      
	
       /
       * 注意要写在第一行，同时给style标签加入lang
       =
       "scss"属性 
       *
       /
      
     
    

     

      

     
     

      

       	@import 
       "uview-ui/index.scss";
      
     
    

     

      

     
     

      

       <
       /style
       >
      
     
   

2.1.6 配置easycom组件模式

此配置需要在项目src目录的pages.json中进行。

   

    

     

      

     
     

      

       /
       / pages.json
      
     
    

     

      

     
     

      

       {
      
     
    

     

      

     
     

      
	
       "easycom": {
      
     
    

     

      

     
     

      
		
       "^u-(.*)": 
       "uview-ui/components/u-$1/u-$1.vue"
      
     
    

     

      

     
     

      

       	},
      
     
    

     

      

     
     

      
	
      
     
    

     

      

     
     

      
	
       /
       / 此为本身已有的内容
      
     
    

     

      

     
     

      
	
       "pages": [
      
     
    

     

      

     
     

      
		
       /
       / ......
      
     
    

     

      

     
     

      

       	]
      
     
    

     

      

     
     

      

       }
      
     
   

2.1.7 Cli模式额外配置

如果您是vue-cli模式的项目，还需要在项目根目录的vue.config.js文件中进行如下配置：

   

    

     

      

     
     

      

       /
       / vue.config.js，如没有此文件则手动创建
      
     
    

     

      

     
     

      

       module.exports 
       = {
      
     
    

     

      

     
     

      

        transpileDependencies: [
       'uview-ui']
      
     
    

     

      

     
     

      

       }
      
     
   

2.2 下载方式安装

间官网 :

下载安装方式配置 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

三、小程序的分包

在小程序中，要求主包不能超过2M，主包包括：pages、引入到pages里的components、static等，在打包的时候会生成vinder、runtime等，两者已经为1M以上了，所以需要解决：

1、分包subPackages

一般是将tabbar在主包pages和tarbbar中注册，不用在subPackages中注册

其它非tabbar页面就在subPackges中注册

在pages同级pages_home生成此目录，里面可放组件和图片

  

   

    

     

    
    

     
	
      "subPackages": [{
     
    
   

    

     

    
    

     
		
      "root": 
      "pages_home",
     
    
   

    

     

    
    

     
		
      "pages": [{
     
    
   

    

     

    
    

     
			
      "path": 
      "pages/index"
     
    
   

    

     

    
    

     

      		}]
     
    
   

    

     

    
    

     

      	}],
     
    
  

2、减少pages里的代码，减少静态图片的引入，可以使用oss图片，引入https路径

三、App.vue中的生命周期

  

   

    

     

    
    

     
    
      onLaunch: 
      function(
      ) {
     
    
   

    

     

    
    

     
			
      console.
      log(
      'onLaunch是页面第一次加载的时候会触发')
     
    
   

    

     

    
    

     

      		},
     
    
   

    

     

    
    

     
		
      onShow: 
      function(
      ) {
     
    
   

    

     

    
    

     
			
      console.
      log(
      'onShow是从别的页面进入后就会触发')
     
    
   

    

     

    
    

     

      		},
     
    
   

    

     

    
    

     
		
      onHide: 
      function(
      ) {
     
    
   

    

     

    
    

     
			
      console.
      log(
      'onHide是关闭页面后隐藏后')
     
    
   

    

     

    
    

     

      		}
     
    
  

四、工具封装

  

   

    

     

    
    

     

      //在main.js中引入
     
    
   

    

     

    
    

     

      import util 
      from 
      './utils/util.js'
     
    
   

    

     

    
    

     

      Vue.
      prototype.
      $util = util
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      //页面中使用
     
    
   

    

     

    
    

     

      this.
      $util.***
     
    
  

五、api接口请求封装

六、store

http://t.csdn.cn/oVCyM

七、加载顺序

页面中的数据DOM树、data、mounted三者之间的加载顺序

若有问题可以用nextTick时间片解决

八、flex的使用

  

   

    

     

    
    

     

          .contrainer {
     
    
   

    

     

    
    

     

      		display: flex;
     
    
   

    

     

    
    

     

      		flex-direction: column;
     
    
   

    

     

    
    

     

      		height: calc(100vh - 94px);
     
    
   

    

     

    
    

     

      		overflow: hidden;
     
    
   

    

     

    
    

     

      		.scroll_box {
     
    
   

    

     

    
    

     

      			flex: 1 100%;
     
    
   

    

     

    
    

     

      			overflow-y: scroll;
     
    
   

    

     

    
    

     

      		}
     
    
   

    

     

    
    

     

      		.fixd_box {
     
    
   

    

     

    
    

     

      			height: 100rpx;
     
    
   

    

     

    
    

     

      		}
     
    
   

    

     

    
    

     

      	}
     
    
  

转载：https://blog.csdn.net/qq_52301431/article/details/128777135