1. uview 组件库的安装与使用

1. 通过 npm install uview-ui 下载组件库

2. 在 main.js 文件中引入uView主JS库

   // main.js
   import uView from "uview-ui";
   Vue.use(uView);
   

3. 在app.vue文件中，引入uView基础样式

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

   <style lang="scss">
   	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
   	@import "uview-ui/index.scss";
   </style>
   

4. 在 page.json 文件中，配置easycom组件模式

   uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。

   {
          
          
   //  下载的方式需要在前面加 "@/" ,npm 的方式不需要加"@/" 
   	"easycom": {
          
          
   		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
   	},
   
   	// 此为本身已有的内容
   	"pages": [
   		// ......
   	]
   }
   

2. uniapp window-top 吸顶效果

uniapp css 语法中有一个 --window-top 全局变量。

使用下面的方法就可以将导航栏固定在页面中,不会随页面的滚动而滚动了。

具体使用方法:

position: fixed;
top: var(--window-top);
left: 0;
z-index: 1;

3. uniapp 项目打包配置

h5 打包配置

1. mainfest.json 文件 选中 h5配置。
2. 填写页面标题
3. 填写 运行的基础路径，一般都为 ‘ ./ ’
4. 直接点击发行即可

微信小程序 打包配置

1. 直接点击发行 微信小程序，然后填入 appid 即可
2. 然后在微信小程序中 点击上传即可

app 打包配置

1. mainfest.json 文件中选中 ， app图表配置

2. 发行，使用 云打包进行发行。

   如果打包过程中提示需要验证，就登录 hbuilder 开发者后台。在“个人中心”中选择 账户信息。最后绑定手机号并验证。

3. 选择使用‘云端证书’，其他的都可以不选