uniapp入门级最佳实践（一） | 8月更文挑战

这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战

一、简介（先了解uniapp）

在众多跨端开发框架中，我觉得uniapp还是比较容易上手的，因为我会vue比较多。

跨端框架

1、页面渲染方式：

    1）纯web渲染：inoic

    2）纯native原生渲染：rn、weex

    3）Hybrid渲染，就是web和native的结合版本：uniapp(可以选择weex渲染)

2、uniapp：

开发工具：HbuilderX

跨端能力：可以跨10个不同的平台，开发ios的APP可以不使用mac电脑，Hbuilder可以直接帮你上传

会使用vue就可以使用uniapp，支持云开发

3、nvue（native vue）

uniapp的App端内置了一个基于weex改进的原生渲染引擎，提供原生渲染的能力。在APP端，如果用vue页面，就会使用webView渲染，但是如果用nvue页面就会用原生渲染。一个app中可以同时用两种页面，例如首页用nvue，详情页用vue页面。但是nvue的css写法有限制，如果不准备开发APP端，就不要用nvue。

二、实战开发

先看下文件目录：

1、可以在App.vue中globalData写入公共变量，可以全局访问

App.vue
<script>
	export default {
		globalData: {//全局变量
			serverUrl: 'https://abc.cn',
			token: '',
		},
                //生命周期
		onShow: function(options) {
                    console.log('onShow');
		}
	}
</script>


//页面访问方式：
getApp().globalData.token
复制代码

2、main.js引入公共js文件（封装的各种方法），可以全局访问

import Vue from 'vue'
import App from './App'

import utils from '@/utils/utils.js';//封装的公共js文件

Vue.config.productionTip = false;

Vue.prototype.$utils = utils;

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()
复制代码

3、pages.json配置页面路由，标题，标题背景，tabbar等

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/home/home",
			"style": {
				"navigationBarTitleText": "首页"
			}
		}
        ],
	"globalStyle": {
		"navigationBarTextStyle": "#FFFFFF",//设置导航栏文字颜色
		"navigationBarTitleText": "hello uniapp",//设置页面名称
		"navigationBarBackgroundColor": "#19AD78",//设置导航栏背景色
		"backgroundColor": "#F8F8F8"//设置背景色
        },
        //配置tabbar
	"tabBar": {
		"selectedColor":"#19AD78",
		"color":"#A8A8A8",
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/home/home",				"iconPath": "static/images/a.png",
				"selectedIconPath": "static/images/a_selected.png"
			},{
				"text": "消息",
				"pagePath": "pages/message/message",
				"iconPath": "static/images/b.png",
				"selectedIconPath": "static/images/b_selected.png"
			},{
				"text": "我的",
				"pagePath": "pages/mine/mine",
				"iconPath": "static/images/c.png",
				"selectedIconPath": "static/images/c_selected.png"
			}
		]
	}
}
复制代码

4、判断不同的平台使用不同的代码，使用注释的方式进行判断，ifdef后面的平台名称官网有全的可以看下uniapp条件编译

页面：

 <!-- #ifdef MP-WEIXIN -->
      <official-account></official-account>
 <!-- #endif -->
复制代码

这里是只在微信小程序的平台中才展示这个组件

js：

                                // #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '/pages/login/login',
					});		
				// #endif
					
				// #ifdef H5
					uni.navigateTo({
						url: '/pages/loginH5/loginH5',
					});		
				// #endif	
复制代码

这里js判断是微信小程序还是H5浏览器，跳转到不同的登录页面，因为微信小程序和H5小程序的登录和授权样式和功能都不太一样，我就写了两个页面，如果你们的页面差不多就可以用同一个页面，在里面判断就行。

css：

/*  #ifdef  MP-WEIXIN */平台特有样式
/*  #endif  */
复制代码

这里是只在微信小程序平台才展示这个样式，其他平台不启用这个样式。

先写这么多，我感觉uniapp很容易上手很好用，推荐推荐。