uniapp从零开始搭建
前言
1.开发工具 HBuilder
2.Node.js (18.12.1)
3.npm（9.1.2）
4.模拟器：夜神模拟器
5.技术选型
- UI框架：uni-ui
- 多语言：vue-i18n
- 多主题：scss
- 状态管理：vuex
- HTTP请求库: luch-request
6.目录结构
项目创建
1.uni-ui
打开HBuilder 左上角 文件-> 项目 -> 选择uni-ui项目 – 版本vue2 – 创建
- manifest.json 配置
- 自定义标题栏（pages.json）
// 禁止滚动
{
"path": "pages/index",
"style": {
"navigationStyle": "custom"
}
},
// 可下拉刷新
{
"path": "pages/index",
"style": {
"enablePullDownRefresh": true,
"onReachBottomDistance": 100
}
},
"globalStyle": {
"backgroundColor": "#f4f4f4",
"navigationStyle": "custom"
}- Navbar.vue(自定义标题栏组件)
<template>
<view style="box-shadow: 0rpx 0rpx 10rpx 2rpx #efefef;">
<uni-nav-bar :title="title" :color="color" :backgroundColor="backgroundColor" :fixed="fixed" :border="border"
:style="{paddingTop:getSystemInfo().statusBarHeight + 'px'}"></uni-nav-bar>
</view>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
},
shadow: {
type: Boolean,
default: true
},
border: {
type: Boolean,
default: false
},
fixed: {
type: Boolean,
default: false
},
color: {
type: String,
default: "#303133"
},
backgroundColor: {
type: String,
default: "#fff"
}
},
data() {
return {}
},
created() {
}
}
</script>
<style>
</style>- 自定义底部菜单栏
2.vue-i18n
npm install vue-i18n- 提供一个向外暴露的i18n方法 （文件路径：comon/i18n/index.js，参考目录结构）
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from 'https://zhuanlan.zhihu.com/p/language/zh'
import en from 'https://zhuanlan.zhihu.com/p/language/en'
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'zh',
messages: {
'en': en,
'zh': zh
}
})
export default i18n;
// main.js
- 提供一个向外暴露的多语言 中文 （文件路径：comon/i18n/language/zh.js，参考目录结构）
export default {
list:{
name:'我的博客',
Professional:'Web前端工程师',
data:[
{ text:'全部文章' },
{ text:'我的npm' },
{ text:'项目库' },
{ text:'软件分享' },
{ text:'图片分享' },
{ text:'我的简历' },
] },
Page:{
index:{
title:'欢迎我的朋友',
}
}
}- main.js
import i18n from '@/common/i18n/index'
const app = new Vue({
...App,
i18n,
})- 使用
{{$t(`list.name`)}}3.http请求封装
npm install luch-request- 提供一个向外暴露的http方法 （文件路径：comon/http/index.js，参考目录结构）
import Request from 'luch-request' // 使用npm
const http = new Request();
/****************************************************************
* 初始化请求配置
***************************************************************/
http.setConfig((defaultConfig) => {
/* 根域名 */
defaultConfig.baseURL = "http://localhost:8080/";
defaultConfig.header = {
'content-type': "application/json;charset=UTF-8;",
}
return defaultConfig;
});
/****************************************************************
* 请求拦截
***************************************************************/
http.interceptors.request.use((config) => {
uni.showLoading({ title: '加载中' });
config.data = config.data || {};
// cookie 不存在跳转登录页面
let Authorization = getTokenCookie();
if (!Authorization) {
// uni.reLaunch({url:ROUTERS.SYSTEM.LOGIN});
}
config.header = {
...config.header,
'Authorization': Authorization
}
return config;
}, (config) => Promise.reject(config))
/****************************************************************
* 响应拦截
***************************************************************/
http.interceptors.response.use((response) => {
if (response.data) {
if (response.data.statusCode == 200) {
uni.hideLoading();
return response.data;
}
}
uni.hideLoading();
return Promise.reject(response);
}, (response) => {
uni.hideLoading();
/* 301 401 返回重新登录 */
if (response.statusCode == 401 || data.statusCode == 301) {
// uni.reLaunch({ url: ROUTERS.SYSTEM.LOGIN });
}
return Promise.reject(response);
})
export default http;- main
import http from '@/common/http/index'
Vue.prototype.$http = http;- 使用参考 luch-request官方文档
4.Vuex
npm install vuex- 提供一个向外暴露的vuex方法 （文件路径：store，参考目录结构）
import Vue from 'vue'
import Vuex from 'vuex'
import userStore from 'https://zhuanlan.zhihu.com/p/modules/userStore'
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
userStore,
}
})
export default store- 要是代码多了分模块
const userStore = {
state:()=>({
username:"zhan"
}),
actions:{
loginSuccess(user){
this.username = user.username;
}
},
getters:{}
}
export default userStore;- main.js
import store from "https://zhuanlan.zhihu.com/p/store/index";
Vue.prototype.$store = store
const app = new Vue({
...App,
store,
})- 使用
this.$store.state.userStore.username;5.封装常用的公共方法
1.缓存
// 基本缓存方法
export function getCookie(key) {
let str = uni.getStorageSync(key);
return str;
}
export function setCookie(key, data) {
uni.setStorageSync(key, data)
}
export function removeCookie(key) {
uni.removeStorageSync(key);
}2.路由跳转
ROUTER() {
return {
/**
* @url 路径 String
* @params 参数 String
* @type 跳转方式 String
*/
to: function(url, params = {}, tpye = "navigateTo") {
if (tpye == 'navigateTo') {
uni.navigateTo({
url: url + '?' + transParams(params)
});
}
if (tpye == 'redirectTo') {
uni.redirectTo({
url: url
});
}
if (tpye == 'switchTab') {
uni.switchTab({
url: url
});
}
if (tpye == 'reLaunch') {
uni.reLaunch({
url: url
});
}
if (tpye == 'navigateBack') {
uni.navigateBack();
}
},
/**
* @delta 返回上 { n:number } 级
*/
back: function(delta = 1) {
uni.navigateBack(delta);
}
}
}3.常用方法
/**
* 复制内容到黏贴板
* @param {Object} str
*/
copy(str) {
uni.setClipboardData({
data: str,
success: function() {
uni.showToast({
title: "Copy Successfully",
duration: 2000,
icon: 'none'
});
},
fail(err) {
uni.showToast({
title: "Replication Failed:" + err,
duration: 2000,
icon: 'none'
});
}
})
},
/**
* 消息提示
* @param {Object} title
*/
message(title) {
if (title) {
uni.showToast({
title: title,
duration: 2000,
icon: 'none'
});
} else {
return {
ok: function() {
uni.showToast({
title: "操作成功",
duration: 2000,
icon: 'success'
});
},
err: function(title) {
uni.showToast({
title: "操作失败",
duration: 2000,
icon: 'error'
});
}
}
}
},
/**
* 本地图片
* @param {Object} imagePath
*/
getImageStatic(imagePath) {
return '/static/image/' + imagePath;
},
/**
* 保留小数点
* @value { number|string } 原数据
* @fractionDigits {number} 保留几位数 默认2位
*/
round(value, fractionDigits = 2) {
var tens = Math.pow(10, fractionDigits);
return Math.round(value * tens) / tens;
},
/**
* 检测时间差
* var now = new Date().getTime();
* checkTimeDiff(lastTime, now, 1)
* @param {Object} lastTime
* @param {Object} now 当前时间
* @param {Object} timeDiffSecondsValues
*/
checkTimeDiff(lastTime, now, timeDiffSecondsValues) {
if (!lastTime) {
return true;
}
if (now - lastTime > timeDiffSecondsValues * 1000) {
return true;
}
return false;
},
/**
* 替换字符串
* @str {string} stringFormat('测试{0}123{1}',"内容","完成")
*/
stringFormat(str, ...args) {
if (!str) {
return str;
}
for (var i = 0; i < args.length; i++) {
var reg = new RegExp("({)" + i + "(})", "g");
str = str.replace(reg, args[i]);
}
return str;
},
/**
* @deviceId 设备 id
*
* @appId manifest 中应用appid，即DCloud appid。
* @appName manifest 中应用名称
* @appVersion manifest 中应用版本名称。
* @appVersionCode manifest 中应用版本名号。
*
* @screenWidth 屏幕宽度
* @screenHeight 屏幕高度
* @windowWidth 可使用窗口宽度
* @windowHeight 可使用窗口高度
* @windowTop 可使用窗口的顶部位置
* @windowBottom 可使用窗口的底部位置
* @statusBarHeight 手机状态栏的高度
*
* @deviceType 设备类型。如phone、pad、pc、unknow
* @deviceBrand 设备品牌。如：apple、huawei
* @deviceModel 设备型号
* @osName 系统名称 ios、android
* @osVersion 操作系统版本。如 ios 版本，andriod 版本
*/
getSystemInfo() {
let systemInfo = {};
uni.getSystemInfo({
success: (e) => {
systemInfo.deviceId = e.deviceId;
systemInfo.appId = e.appId;
systemInfo.appName = e.appName;
systemInfo.appVersion = e.appVersion;
systemInfo.appVersionCode = e.appVersionCode;
systemInfo.screenWidth = e.screenWidth;
systemInfo.screenHeight = e.screenHeight;
systemInfo.windowWidth = e.windowWidth;
systemInfo.windowHeight = e.windowHeight;
systemInfo.windowTop = e.windowTop;
systemInfo.windowBottom = e.windowBottom;
systemInfo.statusBarHeight = e.statusBarHeight;
systemInfo.deviceType = e.deviceType;
systemInfo.deviceBrand = e.deviceBrand;
systemInfo.deviceModel = e.deviceModel;
systemInfo.osName = e.osName;
systemInfo.osVersion = e.osVersion;
}
})
return systemInfo;
},2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/14060.html
