模块化强迫症:joy:webpack配置工程师:sunglasses:的webpack-vue配置,采用最新的webpack v-4.25和vue-loader v-15.4, 开箱:package:即用, 引入vw适配(建议UI图为375px宽度, 写px单位会自动转为vw)和wechat-js-sdk(方便二次分享以及调用微信其他API),二次封装axios,更高效:rocket:更激爽:kiss:的构建H5项目
npm package https://www.npmjs.com/package/jsl-vue-h5
demo online https://atbulbs.github.io/jsl-vue-h5-demo-online/
# clone repository
$ git clone https://github.com/8bulbs/jsl-webpack-vue-h5.git
# change directory
$ cd jsl-webpack-vue-h5
# install ncu at global
$ npm install -g npm-check-updates
# use ncu
$ ncu -a
# install dependencies
$ npm install
# run the develop server
$ npm start
# build for production with minification
$ npm run build
# change directory
$ cd deploy-server
# install dependencies
$ npm install
# install pm2 at global to manager your production process
$ npm install pm2 -g
# run the deploy server with pm2
$ pm2 start server.js --watch
├─build
│ ├─commonConfig
│ └── ... # 开发和生产的通用配置, 模式, 目标, 别名解析
│ ├─commonPlugins
│ └── ... # 抽取出API请求
│ ├─commonRules
│ └── ... # 通用的编译规则
│ ├─devConfig
│ └── ... # 开发环境的配置, 入口, 出口, 开发服务器, 开发工具, 插件, 编译规则
│ ├─prodConfig
│ └── ... # 生产环境的配置, 入口, 出口, 插件, 编译规则, 优化
│ └─utils
│ └── ... # 工具类
├─deploy-server
│ └── ... # 部署服务器, 支持请求代理和路由的history模式
└─src
├─api
│ └── ... # 抽取出API请求, axios的二次封装
├─shared
│ └── ... # 工具类, 常量定义
├─assets
│ ├─images
│ └── ... # 图片资源
│ ├─js
│ └── ... # 常量定义, 微信js开发工具包的调用
│ └─styles
│ └── ... # css重置, 变量和mixin的设置
├─base-components
│ └── ... # 基础组件
├─components
│ └── ... # 业务组件
├─pages
│ └── ... # 页面视图
├─router
│ └── ... # 路由配置, 路由守卫, 滚动行为
└─store
└── ... # vuex状态管理
a方案: 给img加父级div, 设置父级div的高宽, 再给img设置宽度100%, a方法缺点, 增加了不必要的dom元素; b方案: 用div背景图取代img标签, 此方法虽简单粗暴, 不太好做懒加载, 而且在微信端用户无法保存图片或者识别图片中的二维码; 总结: 根据不同的图片展示用途选择方案
方案: 模态框展示时, 让body固定定位, 模态框不展示时, 再取消body的固定定位
// 定义方法-是否暂停body滚动
isStopBodyScroll (flag) {
const bodyStyle = document.body.style
const top = 0
if (flag) {
top = window.scrollY
bodyStyle.position = 'fixed'
// console.log('body is fixed')
bodyStyle.top = -top + 'px'
} else {
bodyStyle.position = ''
// console.log('body is not fixed')
bodyStyle.top = ''
window.scrollTo(0, top)
}
}a. 在微信端: audio的play方法放在 wx.ready(callback) 回调里执行, 若用户在第三方浏览器比如UC打开, wx.ready 也会执行 b. 在原生APP端: 可让原生同学提供模拟用户点击webview的方法, 调用此方法并传入播放音乐的回调, 或者用更简单的办法让原生修改webview设置
// 设置媒体播放不需要用户的手势
webView.getSettings().setMediaPlaybackRequiresUserGesture(false)// src/assets/js/wechat-config.js
export async function wechatConfig (callBack) {
const res = await getSignature()
const data = res.data
const configObj = {
debug: false,
appId,
timestamp: data.timestamp,
nonceStr: data.noncestr,
signature: data.signature,
jsApiList
}
wx.config(configObj)
wx.ready(() => {
callBack()
wechatShareConfig()
})
}
// src/components/jsl-player.vue
mounted () {
this.setPlayerBg(playImg)
this.startRotate()
if (isInWechat()) {
wechatConfig(this.audioPlay)
} else {
this.audioPlay()
}
}4. 开发时, 若从微信平台获取签名的接口, 与其他接口不在同一个服务器, 可在devServer里设置多个代理, 解决跨域, 测试与生产服务器必须有公网域名才能获取合法签名, 还需后端同学申请访问获取签名服务器的权限
export function getSignature () {
return $.get('/?appId=' + appId + '&url=' + url)
}// 微信端的ua关键字与原生自定义的ua关键字
export const uaKeyWordsMap = {
isInWechat: 'micromessenger',
isInAndroidApp: 'TSH-Android',
isInIosApp: 'TSH-iOS'
}
// 获取H5的运行时环境
export function getH5RuntimeEnv () {
let result = ''
const ua = window.navigator.userAgent.toLowerCase()
Object.keys(uaKeyWordsMap).forEach((runtimeEnv) => {
const uaKeyWord = uaKeyWordsMap[runtimeEnv].toLowerCase()
if (ua.indexOf(uaKeyWord) > -1) {
result = runtimeEnv
}
})
return result
}span
display inline-block
transform scale(0.95)11. input框在ios平台, 须点击多次才能出发文件选择框, 解决办法, 加上 cursor: pointer, 我只想说这个小手是黑科技, 比较科学的解释是, 微信浏览器会把有小手的元素解析为a标签, 而微信里的click事件只在a标签上有效
14. 键盘唤起时,让输入框position: fixed, 如果iOS和Android的webView的键盘唤起时页面的行为不一样, 比如一个是键盘把页面顶上去, 一个是遮住页面, 注意遮住页面后页面的100vh是会变小的
<script src="//domin.com/js"></script>