做网站好的网站建设公司排名,网站建设html模板,自媒体官网平台注册,口碑营销的步骤文章目录 1. 项目构建1.1 脚手架构建1.2 HBuilderX创建 uni-app项目步骤#xff1a; 2 . 包依赖2.1 uView2.2 使用uni原生ui插件2.3 uni-modules2.4 vuex使用 3.跨平台兼容3.1 条件编译 4.API 使用4.1 正逆参数传递 5. 接口封装6. 多端打包3.1 微信小程序3.2 打包App3.2.1 自有… 文章目录 1. 项目构建1.1 脚手架构建1.2 HBuilderX创建 uni-app项目步骤 2 . 包依赖2.1 uView2.2 使用uni原生ui插件2.3 uni-modules2.4 vuex使用 3.跨平台兼容3.1 条件编译 4.API 使用4.1 正逆参数传递 5. 接口封装6. 多端打包3.1 微信小程序3.2 打包App3.2.1 自有证书-申请3.2.3 离线打包配置 1. 项目构建
1.1 脚手架构建
全局安装脚手架 npm install -g vue/cli4 切记安装4.x.x的版本 创建项目 vue create -p dcloudio/uni-preset-vue my-project 默认模板执行命令参考 package.json
1.2 HBuilderX创建 uni-app项目步骤
点工具栏里的文件 - 新建 - 项目
2 . 包依赖
2.1 uView
安装依赖 (注意项目名称不能有中文字符) // 安装sassnpm i sass -D// 安装sass-loader注意需要版本10否则可能会导致vue与sass的兼容问题而报错npm i sass-loader10 -D// 安装uview-uinpm install uview-ui2.0.31全局引入uview js库main.js import uView from uview-ui;Vue.use(uView);全局引入uView的全局SCSS主题文件 /* uni.scss */import uview-ui/theme.scss;全局引入uview 基础样式 // 在App.vue中首行的位置引入注意给style标签加入langscss属性style langscss/* 注意要写在第一行同时给style标签加入langscss属性 */import uview-ui/index.scss;/style配置easycom模式引入uview组件 // pages.json{easycom: {^u-(.*): uview-ui/components/u-$1/u-$1.vue},// 此为本身已有的内容pages: [// ......]}配置vue.config.js文件 // vue.config.js如没有此文件则手动创建 放入项目根目录下module.exports {transpileDependencies: [uview-ui]}使用uview组件 u-button typeprimary :disableddisabled text禁用/u-buttonu-button typeprimary loading loadingText加载中/u-buttonu-button typeprimary iconmap text图标按钮/u-buttonu-button typeprimary shapecircle text按钮形状/u-buttonu-button typeprimary sizesmall text大小尺寸/u-button文档参考与bug处理 官方文档配置参考 实例项目参考 注意点 cnpm 安装会出现包配置错误
2.2 使用uni原生ui插件
安装sass 及 sass-loader
npm i sass -D
npm i sass-loader10.1.1 -D安装uni-ui
npm install dcloudio/uni-ui使用
scriptimport {uniBadge} from dcloudio/uni-uiexport default {components: {uniBadge}}
/script2.3 uni-modules
通过 uni_modules插件模块化规范单独安装组件或通过 uni_modules 按需安装某个组件 node_modules与uni_modules区别 具体引入参考
2.4 vuex使用
vuex是基于vue框架的一个状态管理库。可以管理复杂应用的数据状态比如兄弟组件的通信、多层嵌套的组件的传值等等。核心概念 State、Getter、Mutation、Action、Module。 安装
npm install vuex --save 先安装依赖新建 store/index.js
// 导入 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 storemain.js 引入
import store from ./store;
Vue.config.productionTip false
Vue.use(uView);
App.mpType appconst app new Vue({// 把 store 的实例注入所有的子组件store,...App
})
app.$mount()具体使用说明参考 vuex
3.跨平台兼容
3.1 条件编译
不同的平台展示不同特性与功能条件编译是用特殊的注释作为标记在编译时根据这些特殊的注释将注释里面的代码编译到不同平台。官网配置参考 以 #ifdef 或 #ifndef 加 %PLATFORM% 开头以 #endif 结尾。 #ifdefif defined 仅在某平台存在 #ifndefif not defined 除了某平台均存在 %PLATFORM%平台名称 uni.getSystemInfo 区分Android 和iOS
template!-- 条件编译支持样式支持js与Ui --view classcontent!-- #ifdef H5 --image classlogo src/static/logo.png/imageview classtext-areatext classtitle{{title}}/text/view!-- 条件编译 --!-- #endif --!-- APP-PLUS有 多端用或|| --!-- #ifndef APP-PLUS || H5 --!-- #endif --/view
/templatescriptexport default {data() {return {title: Hello}},onLoad() {// 方法里面也一样使用// #ifdef APP-PLUS // #endifswitch(uni.getSystemInfoSync().platform){case android :console.log(运行在Android上)break;case ios :console.log(运行在IOS上)break;default :console.log(运行在开发者工具上)break;} },}
/script4.API 使用
4.1 正逆参数传递
index.vue
templateview classcontentnavigator url/pages/home/home?nameadmin跳转/navigatorbutton clickhyChange()事件跳转/button/view
/templatescriptexport default {data() {return {title: Hello}},methods: {hyChange() {uni.navigateTo({url: /pages/home/home?nameadminpsd12346678,// 触发这个事件成功时的传递参数success(res) {res.eventChannel.emit(hyPageHome, {data: 触发成功跳转传递的事件})},events: {backEvent(data) {console.log(逆序参数, data);}}})}}}
/scriptstyle
/stylehome.vue
templateviewbutton typedefaulthome/buttonbutton typewarn sizemini clickhyIndex逆向传递/button/view
/templatescriptexport 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})}}}
/scriptstyle/style5. 接口封装
参考
6. 多端打包
3.1 微信小程序
3.2 打包App
3.2.1 自有证书-申请
下载安装jre并配置环境变量 这里不做配置
bin\jlink.exe --module-path jmods --add-modules java.desktop --output jre使用keytool -genkey命令生成证书 estalias 是后面在hbuilder上要填的 证书别名 test.keystore 是后面在hbuilder上要填的 证书文件 自己输入的密钥库口令 是后面在hbuilder上要填的 证书私钥密码 (比如123456) 3. 查看证书
keytool -list -v -keystore test.keystore配置 注意导入的证书文件是test.keystore
3.2.3 离线打包配置
参考官网离线打包配置
参考文章 christian-dong作者写的uniapp 项目实践 Zhou_慧写的接口封装
