uni-app搭建项目
1. 通过 HBuilderX 可视化界面
2. 通过vue-cli命令行
vue create -p dcloudio/uni-preset-vue my-projectuni-app整合vant
前言
vant ui有h5版和微信小程序版。其h5版 （vant）只能用于h5，其微信小程序版（vant weapp）可用于微信和App，从uni-app 2.4.7起，H5和QQ小程序也支持了微信小程序组件。
H5版本
通过 npm & yarn 安装 -&link
# 通过 yarn 安装 注意指定版本
yarn add vant
# 通过 npm 安装 2.10.6
# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2引入 vant 组件(全局引入)
注意：1、是否全局引入，根据项目而定
2、现使用node版本12.6.0，如果使用16.15.0会出现版本兼容问题(引入 vant/lib/index.css 报错)
// 引入vant
// #ifdef H5
import Vant from 'vant';
import {
ConfigProvider
} from "vant";
import 'vant/lib/index.css';
// #endif
// #ifdef H5
app.use(Vant); //
app.use(ConfigProvider);
// #endif微信小程序版本
使用步骤
下载代码
-
在项目根目录下新建
wxcomponents目录 ，此目录应该与components目录同级。 -
直接通过
git下载 vant-weapp 最新源代码，并将dist目录拷贝到新建的wxcomponents目录下，并重命名dist为vant-weapp。 -
在 pages.json 的 globalStyle 中 引入所需要的组件
-
"globalStyle": { "pageOrientation": "portrait", "navigationBarTitleText": "Hello uniapp", "navigationBarTextStyle": "white", "navigationBarBackgroundColor": "#007AFF", "backgroundColor": "#F8F8F8", "backgroundColorTop": "#F4F5F6", "backgroundColorBottom": "#F4F5F6", "usingComponents": { //这里为方便，全局引入了所有组件，也可以在某个page下单独引用某个组件 "demo-block": "/wxcomponents/vant/demo-block/index", "van-action-sheet": "/wxcomponents/vant/action-sheet/index", "van-area": "/wxcomponents/vant/area/index", // "van-badge": "/wxcomponents/vant/badge/index", // "van-badge-group": "/wxcomponents/vant/badge-group/index", "van-button": "/wxcomponents/vant/button/index", "van-card": "/wxcomponents/vant/card/index", "van-cell": "/wxcomponents/vant/cell/index", "van-cell-group": "/wxcomponents/vant/cell-group/index", "van-checkbox": "/wxcomponents/vant/checkbox/index", "van-checkbox-group": "/wxcomponents/vant/checkbox-group/index", "van-col": "/wxcomponents/vant/col/index", "van-dialog": "/wxcomponents/vant/dialog/index", "van-field": "/wxcomponents/vant/field/index", "van-goods-action": "/wxcomponents/vant/goods-action/index", "van-goods-action-icon": "/wxcomponents/vant/goods-action-icon/index", "van-goods-action-button": "/wxcomponents/vant/goods-action-button/index", "van-icon": "/wxcomponents/vant/icon/index", "van-loading": "/wxcomponents/vant/loading/index", "van-nav-bar": "/wxcomponents/vant/nav-bar/index", "van-notice-bar": "/wxcomponents/vant/notice-bar/index", "van-notify": "/wxcomponents/vant/notify/index", "van-panel": "/wxcomponents/vant/panel/index", "van-popup": "/wxcomponents/vant/popup/index", "van-progress": "/wxcomponents/vant/progress/index", "van-radio": "/wxcomponents/vant/radio/index", "van-radio-group": "/wxcomponents/vant/radio-group/index", "van-row": "/wxcomponents/vant/row/index", "van-search": "/wxcomponents/vant/search/index", "van-slider": "/wxcomponents/vant/slider/index", "van-stepper": "/wxcomponents/vant/stepper/index", "van-steps": "/wxcomponents/vant/steps/index", "van-submit-bar": "/wxcomponents/vant/submit-bar/index", "van-swipe-cell": "/wxcomponents/vant/swipe-cell/index", "van-switch": "/wxcomponents/vant/switch/index", // "van-switch-cell": "/wxcomponents/vant/switch-cell/index", "van-tab": "/wxcomponents/vant/tab/index", "van-tabs": "/wxcomponents/vant/tabs/index", "van-tabbar": "/wxcomponents/vant/tabbar/index", "van-tabbar-item": "/wxcomponents/vant/tabbar-item/index", "van-tag": "/wxcomponents/vant/tag/index", "van-toast": "/wxcomponents/vant/toast/index", "van-transition": "/wxcomponents/vant/transition/index", "van-tree-select": "/wxcomponents/vant/tree-select/index", "van-datetime-picker": "/wxcomponents/vant/datetime-picker/index", "van-rate": "/wxcomponents/vant/rate/index", "van-collapse": "/wxcomponents/vant/collapse/index", "van-collapse-item": "/wxcomponents/vant/collapse-item/index", "van-picker": "/wxcomponents/vant/picker/index" }, "mp-360": { "navigationStyle": "custom" }, "h5": { "maxWidth": 1190, "navigationBarTextStyle": "black", "navigationBarBackgroundColor": "#F1F1F1" } },
uni-app整合nuxt
在使用 uni-app 开发 小程序 与 h5 的时候，难免需要开启 SSR 渲染，这时候我们需要接入基于 vue 的 nuxt 框架
下载 Nuxt 框架 ,无需使用 create-nuxt-app. 脚手架
yarn add nuxt配置 package.json 文件
{
"name": "my-app",
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"generate": "nuxt generate",
"start": "nuxt start"
}
}配置 nuxt.config.js 文件
import {
resolve
} from 'path'
export default {
head: {
title: '~~',
meta: [{
charset: 'utf-8'
},
{
'http-equiv': 'X-UA-Compatible',
content: 'IE=Edge'
},
{
name: 'viewport',
content: 'width=750, user-scalable=no, target-densitydpi=device-dpi'
},
{
name: "apple-mobile-web-app-capable",
content: "yes"
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'
},
{
hid: 'description',
name: 'description',
content:'~~'
}
],
link: [{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
}],
},
// 引入公共scss
styleResources: {
scss: ['~/uni.scss']
},
srcDir: 'src/',
}
Nuxt pages下不同的页面对应layout
layouts/default.vue:
<template>
<div>
<div class="title">这里是自定义也页面的头部(布局)</div>
<!-- nuxt可以理解为所对应的.vue页面的内容 -->
<nuxt/>
<div class="footer">这里是自定义页面的底部(布局)</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.title,.footer{
padding: 20px;
}
.title{
background: pink;
}
.footer{
background: yellow
}
</style>
运行项目发现会报错误 postcss 错误，需要重新配置一下 postcss.config.js ,需要依赖 nuxt-start、cross-env、css-loader
yarn add nuxt-start cross-env css-loader注意：下载 css-loader 版本要与项目匹配，建议下载 css-loader@5
配置 postcss.config.js
postcss 文件需要做 nuxt 与 uni-app 兼容处理
const path = require('path')
// nuxt兼容
if (process.env.VUE_APP_IS_NUXT) {
module.exports = {
plugins: {}
}
} else {
// uni-app原有
module.exports = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
resolve(id, basedir, importOptions) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
}),
require('autoprefixer')({
remove: process.env.UNI_PLATFORM !== 'h5'
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
]
}
}
新package.json文件：
{
"name": "my-app",
"scripts": {
"dev": "cross-env VUE_APP_IS_NUXT=true nuxt",
"prd": "cross-env VUE_APP_IS_NUXT=true nuxt build",
"generate": "nuxt generate",
"start": "nuxt start"
}
}运行 yarn dev 会遇到store报错如下：
nuxt报错：[nuxt] store/index.js should export a method that returns a Vuex instance.
store/index.js代码如下：
// 入口文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
authenticated: 'a'
}
})
export default store
只要将上方的 store 写法改一下就好了：（即js应该导出一个返回Vuex实例的方法。）
// 入口文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = () => new Vuex.Store({
state: {
authenticated: 'a'
}
})
export default store
运行 npm run dev ( 基于 nuxt 框架的M站 ) 即可，npm run dev:mp-weixin (运行微信小程序)
移动端布局适配 postcss-px-to-viewport（兼容vant）
- 我们先把它安装到项目的开发环境中：
npm i postcss-px-to-viewport -D
- 在项目根目录下添加
postcss.config.js文件 - 添加如下配置：
const path = require('path')
if (process.env.VUE_APP_IS_NUXT) {
module.exports = {
plugins: {
// autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
"postcss-px-to-viewport": {
unitToConvert: "px", // 要转化的单位
viewportWidth: 375, // UI设计稿的宽度
unitPrecision: 13, // 转换后的精度，即小数点位数
propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
landscape: false, // 是否处理横屏情况
landscapeUnit: 'vw', // 横屏时使用的单位
landscapeWidth: 1134 // 横屏时使用的视口宽度
}
}
}
} else {
module.exports = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
resolve(id, basedir, importOptions) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
}),
require('autoprefixer')({
remove: process.env.UNI_PLATFORM !== 'h5'
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
]
}
}
nuxt 添加 vant-UI
- 新建插件文件
- 注册插件
- 使用 vant 插件
1、新建插件文件
在 plugins 目录添加 vant.js 插件文件，用来引用 Vant 组件：
vant.js
/**
* 引入所有vant组件
*/
import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
2、注册插件
在 nuxt.config.js 文件里注册插件：
nuxt.config.js
plugins: [{src: '~plugins/vant', ssr: true}],注意： ssr（服务器端运行） 要设置为 true，否则浏览器出现 no match 的警告。
3、使用 Vant 标签
在 page 文件中直接使用标签：
index.vue
/**
* 引入所有vant组件
*/
import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
vant/lib/vant-css/index.css in ./plugins/vant.js，默认将它当成模块了，发现运行出错
解决方法：将plugins/vant.js中的import 'vant/lib/vant-css/index.css'删除掉，然后在 nuxt.config.js 中使用全局样式
srcDir: 'src/',
css: ['vant/lib/index.css'],
plugins: [{src: '@/plugins/vant', ssr: true}],nuxt与uni-app打包小程序分包处理
当我们使用 nuxt 框架开发好M站 h5 页面后，一般 nuxt 框架只有 pages 一个文件夹，由于pages文件夹放入页面太多导致打包小程序会出现压缩包太多，所以我们采取分包测试，但是使用nuxt框架不能改变 pages 原有页面结构，所以使用fs进行 pages 复制分包 pages2
pages.json
// pages.json
{
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}],
"subPackages": [{
"root": "pages2",// 分包
"pages": [{
"path": "sub"
}]
}],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents": {}
}
}
buildFileMap.js => 复制 pages 页面到 pages2
const fs = require('fs');
const path = require('path'); //系统路径模块
const process = require('process');
copyFileMove('./src/pages', './src/pages2');
function copyFileMove(src, dist) {
delHandle(dist); // 先删除
fs.mkdir(dist, function() {
// 创建文件夹
copyHandle(src, dist);
});
};
// 复制文件夹文件
function copyHandle(src, dist) {
fs.readdir(src, function(err, paths) {
if (!err && paths) {
paths.forEach((p) => {
let _src = src + '/' + p;
let _dist = dist + '/' + p;
fs.stat(_src, function(err, stat) {
if (stat.isFile()) {
fs.copyFileSync(_src, _dist);
} else if (stat.isDirectory()) {
// 创建文件夹
fs.mkdir(_dist, function() {
copyHandle(_src, _dist);
});
}
})
})
}
})
};
// 删除文件夹
function delHandle(src, callback) {
if (!src) return;
let isExist = fs.existsSync(src);
if (isExist) {
var list = fs.readdirSync(src)
list.forEach(function(v, i) {
let target = src + '/' + v;
if (fs.statSync(target).isFile()) {
fs.unlinkSync(target);
} else if (fs.statSync(target).isDirectory()) {
delHandle(target, callback);
}
});
fs.rmdirSync(src);
}
}
nextFileMap.js => 删除 pages2 文件夹
const fs = require('fs');
// 删除文件
function delDir(src, callback) {
if (!src) return;
let isExist = fs.existsSync(src);
if (isExist) {
var list = fs.readdirSync(src)
list.forEach(function(v, i) {
let target = src + '/' + v;
if (fs.statSync(target).isFile()) {
fs.unlinkSync(target);
} else if (fs.statSync(target).isDirectory()) {
delDir(target, callback);
}
});
fs.rmdirSync(src);
}
}
delDir('./src/pages2', function() {
// console.log('删除成功：', './src/pages3');
});
执行node命令 => npm run build:mp-weixin
"scripts": {
"serve": "npm run dev:h5",
"build": "npm run build:h5",
"build:mp-weixin": "node buildFileMap.js && cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build && node nextFileMap.js",
}uni-app跨平台开发
跨端兼容
条件编译是用特殊的注释作为标记，在编译的时候根据这些特殊的注释，将注释里的代码编译道不同平台
写法：以 #ifdef 平台名 开头，以 #endif 结尾
平台标识
值 ===> 平台
APP-PLUS ===> 5+App
H5 ===> H5
MP-WEIXIN ===> 微信小程序
MP-ALIPAY ===> 支付宝
MP-BAIDU ===> 百度
MP-TOUTIAO ===> 头条
MP-QQ ===> QQ
代码跨平台兼容
HTML
<!-- #ifdef H5 -->
<view >h5页面显示</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view >微信小程序页面显示</view>
<!-- #endif -->
JS
// #ifdef APP-PLUS
...业务代码
// #endif
CSS
/* #ifdef APP-PLUS */
...style样式代码
/* #endif */
打包编译
{
"name": "my-app",
"scripts": {
"dev:h5": "uni", // H5
"dev:nuxt": "nuxt", // Nuxt
"dev:mp-weixin": "uni -p mp-weixin", // 微信小程序
"build-dev:h5": "uni build", // H5
"build-dev:nuxt": "nuxt build", // Nuxt
"build-dev:mp-weixin": "uni build -p mp-weixin", // 微信小程序
}
}
4543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
