1、下载HbuilderX:HbuilderX官网下载
2、新建项目:官网教程
1)首先鼠标点击新建项目:
2)填写项目名称,选择版本和模板,点击创建
3)点击运行–运行到小程序模拟器
3、导入项目:
1)首先鼠标点击导入项目(可以先将远程的代码下载到本地导入,也可以直接导入远程代码)
2)npm i 安装相应的依赖
3)点击运行–运行到小程序模拟器
4、uniapp中开发H5项目更换favion.ico:
方法一:直接将图片放在static目录下,在index.html中直接引用
5、在H5项目中进行pdf预览:
1)下载pdfjs,将文件夹解压后放在static目录下。
2)将view.js中的跨域代码进行注释,不然会报错:
3)使用代码如下:
<template>
<!-- 预览pdf -->
<view>
<web-view :webview-styles="webviewStyles" :src="url"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
webviewStyles: {
progress: {
color: '#298DF8'
}
},
url: "", // 最终显示在web-view中的路径
viewerUrl: '/static/pdf/web/viewer.html', // pdf.js的viewer.htm所在路径
fileUrl: 'https://1.2.com/' // 要访问的pdf的路径
}
},
onLoad(options) {
let onlineUrl = this.fileUrl+options.url
console.log('onlineUrl',onlineUrl)
// h5,使用h5访问的时候记得跨域
// #ifdef H5
this.url = `${this.viewerUrl}?file=${encodeURIComponent(onlineUrl)}`;
// #endif
// 判断是手机系统:安卓,使用pdf.js
// #ifdef APP-PLUS
if(plus.os.name === 'Android') {
this.url = `${this.viewerUrl}?file=${encodeURIComponent(onlineUrl)}`;
}
// ios,直接访问pdf所在路径
else {
this.url = encodeURIComponent(onlineUrl);
}
// #endif
},
}
</script>
6、打包发布h5项目:
1)线上编译打包自动去除console等输出:
在项目根目录下新建vue.config.js文件,文件中代码写入
// vue.config.js
module.exports = {
productionSourceMap: false, // 生产打包时不输出map文件,增加打包速度
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
}
}
}
2)项目的打包配置:
3)点击菜单栏-》发行-》网站-pc
4)填写完标题和域名,点击 发行
7、HbuilderX插件安装:
stylus编译
、scss/sass编译
、easy-git
、Vue/Vuex/Vue Router代码块
、Javascript代码块
、es6编译
等
8、执行缓存的接口:
function onAccessTokenFetched() {
subscribers.forEach((callback) => {
callback();
})
subscribers = [];
}