- npm install -g @vue/cli@4 (切记安装4.x.x的版本)
vue create -p dcloudio/uni-preset-vue my-project
// 安装sass
npm i sass -D
// 安装sass-loader,注意需要版本10,否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D
// 安装uview-ui
npm install uview-ui@2.0.31
main.js
import uView from "uview-ui";
Vue.use(uView);
/* uni.scss */
@import 'uview-ui/theme.scss';
// 在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
// vue.config.js,如没有此文件则手动创建 放入项目根目录下
module.exports = {
transpileDependencies: ['uview-ui']
}
<u-button type="primary" :disabled="disabled" text="禁用"></u-button>
<u-button type="primary" loading loadingText="加载中"></u-button>
<u-button type="primary" icon="map" text="图标按钮"></u-button>
<u-button type="primary" shape="circle" text="按钮形状"></u-button>
<u-button type="primary" size="small" text="大小尺寸"></u-button>
文档参考与bug处理
官方文档配置参考
实例项目参考
注意点
:cnpm 安装会出现包配置错误
npm i sass -D
npm i sass-loader@10.1.1 -D
npm install @dcloudio/uni-ui
<script>
import {uniBadge} from '@dcloudio/uni-ui'
export default {
components: {uniBadge}
}
</script>
npm install vuex --save 先安装依赖
// 导入 vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 以插件形式使用 vuex
Vue.use(Vuex)
// Vuex.Store 构造器选项
const store = new Vuex.Store({
state: {
username: 'foo',
age: 18,
},
})
export default store
import store from './store';
Vue.config.productionTip = false
Vue.use(uView);
App.mpType = 'app'
const app = new Vue({
// 把 store 的实例注入所有的子组件
store,
...App
})
app.$mount()
以
#ifdef 或 #ifndef 加 %PLATFORM%
开头,以#endif
结尾。
#ifdef
:if defined 仅在某平台存在
#ifndef
:if not defined 除了某平台均存在
%PLATFORM%
:平台名称
Android
和iOS
<template>
<!-- 条件编译支持样式,支持js与Ui -->
<view class="content">
<!-- #ifdef H5 -->
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<!-- 条件编译 -->
<!-- #endif -->
<!-- APP-PLUS有 多端用或|| -->
<!-- #ifndef APP-PLUS || H5 -->
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
// 方法里面也一样使用
// #ifdef APP-PLUS
// #endif
switch(uni.getSystemInfoSync().platform){
case 'android' :
console.log('运行在Android上')
break;
case 'ios' :
console.log('运行在IOS上')
break;
default :
console.log('运行在开发者工具上')
break;
}
},
}
</script>
<template>
<view class="content">
<navigator url="/pages/home/home?name=admin">跳转</navigator>
<button @click="hyChange()">事件跳转</button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
methods: {
hyChange() {
uni.navigateTo({
url: '/pages/home/home?name=admin&psd=12346678',
// 触发这个事件成功时的传递参数
success(res) {
res.eventChannel.emit('hyPageHome', {
data: '触发成功跳转传递的事件'
})
},
events: {
backEvent(data) {
console.log('逆序参数', data);
}
}
})
}
}
}
</script>
<style>
</style>
<template>
<view>
<button type="default">home</button>
<button type="warn" size="mini" @click="hyIndex">逆向传递</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
// 正向传参
onLoad(options) {
console.log('@参数', options);
const eventChannel = this.getOpenerEventChannel()
eventChannel.on('hyPageHome', res => {
console.log(res);
})
},
methods: {
// 逆向传参
hyIndex() {
uni.navigateBack()
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('backEvent', {
name: 'admin',
pad: 'password'
})
}
}
}
</script>
<style>
</style>
bin\jlink.exe --module-path jmods --add-modules java.desktop --output jre
estalias
是后面在hbuilder上要填的 证书别名
test.keystore
是后面在hbuilder上要填的 证书文件
自己输入的密钥库口令 是后面在hbuilder上要填的 证书私钥密码 (比如123456)
keytool -list -v -keystore test.keystore
注意导入的证书文件是test.keystore
参考官网离线打包配置
参考文章
christian-dong作者写的uniapp 项目实践
Zhou_慧写的接口封装