记一次微信公众号开发过程
关于技术选型
之前一直做APP开发，虽然期间做过几个简单前端和混合开发项目，懂得一些前端的基本知识，但毕竟不是专业，所以本次选型就按照目前比较流行的或者自己感兴趣的来吧
1.因为之前使用过Vue，并且考虑到现在前端框架的流行程度，所以框架选用Vue
2.因为是做微信公众号开发，并且考虑到开发周期和自己的CSS水平，选择了VUX作为UI组件库，VUX是基于weui进行开发的
3.网络请求方面，因为之前一直使用ajax所以选择axios，坦白来说好像也只用过axios，如果大神们有什么更好的记得推荐
4.关于css预编译，之前一直使用less，但最近Sass貌似有点儿火，所以决定尝试一下Sass
5.关于IDE的选择，最近VS code比较火，所以决定尝试一下
开发前准备
安装和配置VS Code
去官网下载对应版本安装 官网地址
关于使用过程的问题
以下问题都在安装完对应扩展程序后 ，通过文件—首选项—设置—用户设置进行相关设置
安装扩展程序分方式 如下图
-
汉化问题
- 安装扩展程序Chinese
- 【Ctrl+Shift+p】在输入框中输入“configure display language”
- 重启VS
-
vue ESLint语法检测问题
安装扩展程序 ESLint和Prettier - Code formatter，并在Setting.json 中以下配置"eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true }, { "language": "html", "autoFix": true } ]， // #每次保存的时候自动格式化 "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复 "eslint.autoFixOnSave": true, // #让prettier使用eslint的代码格式进行校验 "prettier.eslintIntegration": true, // #去掉代码结尾的分号 "prettier.semi": false, // #使用带引号替代双引号 "prettier.singleQuote": true, // #让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true -
修改字体大小，保存自动格式化
{ "editor.fontSize": 16, "window.zoomLevel": 1, // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2 } -
html标签换行问题
// #这个按用户自身习惯选择 "vetur.format.defaultFormatter.html": "js-beautify-html", // #让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "auto" // #vue组件中html代码格式化样式 } } "vetur.validation.template": false
开发环境搭建
安装node.js，npm（windows环境）
node.js安装后会自带npm命令
- 去官网下载一个node.js稳定版本点击进行安装
- 安装完成后进入cmd 输入 path check一下node环境变量的配置
C:\Program Files\nodejs\; - node -version检查一下node.js的版本
全局安装Vue脚手架
npm install vue-cli -g
利用vue-cli+webpack搭建项目
vue init webpack vue-cli-demo // 初始化项目 vue-cli-demo 项目文件夹名称
cd vue-cli-demo //跳转到刚才所创建的项目文件夹内
npm install
npm run dev //测试项目是否搭建完成
安装Sass
项目构建完成后，要利用Sass预编译css，所以需要在项目中进行相关配置
- 在项目中安装Sass
要在项目中安装Sass需要一下两步npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装 sass-loader - 修改刚才创建好的vue项目中的webpack.base.conf.js文件
在rules下添加以下代码module: { rules: [ { test: /.sass$/, loaders: ['style', 'css', 'sass'] } ] }
最后再给大家介绍几个css相关的名词
- postcss：添加浏览器前缀
- sass scss less:预处理CSS
关于axios的使用问题
- 安装和配置请参考官网或Github
- 开发环境跨域问题
- config /index.js
proxyTable: { '/api': { target: 'http://linkon.natapp4.cc/api', // 接口的域名 // secure: false, // 如果是https接口，需要配置这个参数 ws: true, changeOrigin: true,// 如果接口跨域，需要进行这个参数配置 pathRewrite: { '^/api': '' } } }- main.js配置
axios.defaults.baseURL = '/api'
开发中遇到的问题
关于移动端适配问题
关于移动端适配的问题，个人总的思路是利用vw+vh+rem
宽高使用vw，vh，%（vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明）
字体和其他使用rem进行适配
rem适配采用amfe-flexible+px2rem
-
在vue项目中使用 amfe-flexible
- 安装
npm intsall amfe-flexible --save-dev- 在main.js中进行配置
import 'amfe-flexible'- 在根目录的index.html 的头部加入手机端适配的meta代码，这段代码可以禁止
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
- 安装
-
在vue项目中引入px2rem
- 安装
npm install px2rem-loader --save-dev //px转换为rem- 在utils.js中配置
const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75, } } const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
微信相关的问题
微信js授权问题
- 引入js-sdk
npm install weixin-js-sdk --save-dev - 在需要的页面引用
import wx from 'weixin-js-sdk' - 微信授权时如果采用ajax请求会造成跨域问题，所以在授权是请采用原生的跳转方式即
window.location.href ='你的后台授权接口地址'+'回调地址'
修改微信浏览器title
- 引入第三方库vue-wechat-title
npm install vue-wechat-title --save-dev- main.js中配置
import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle)- 在router中给每个路由添加meta
{ path: '/about', name: 'about', component: About, meta: { title: '关于我们' } }- vue页面中的使用
<div v-wechat-title="$route.meta.title"></div> ///也可以动态设置 <div v-wechat-title="$route.meta.title=title"></div>
iOS适配的问题
iOS下有个position:fixed失效的问题，以及因为该问题导致的页面滑动问题
还有iOS上取消弹簧效果问题（vue页面为例）
- html.body采用position：fixed，宽高为100%
html, body { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100%; overflow-y: auto; } - 给Vue主页面入口添加以下样式
- html
<div id="app" class="container"> <router-view class="page"/> </div> - css
.container { overflow-y: auto; height: 100%; } .page { position: absolute; left: 0; top: 0; right: 0; bottom: 0; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1; box-sizing: border-box; } //-webkit-overflow-scrolling: touch;是为了让iOS滑动体验顺畅
- html
- vue页面的书写，以头尾固定，中间滚动的为例
- html
<div> <div class="navabar"></div> <div class="scroll-cotainer"> <div class="scroll-body"> </div> </div> <div class="footer"></div> </div>- css
.navabar { position: fixed; top: 0; left: 0; right: 0; height: 12vw; overflow: hidden; z-index: 500; } .footer { position: fixed; left: 0; right: 0; bottom: 0; height: 12vw; z-index: 500; } .scroll-cotainer { position: absolute; top: 12vw; left: 0; right: 0; bottom: 12vw; height: auto; } .scroll-body { width: 100%; height: 100%; overflow-y: auto; }
vue刷新当前页面不出现白屏问题
- App.vue
<template> <div id="app" class="container"> <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { name: 'App', provide () { return { reload: this.reload } }, data () { return { isRouterAlive: true } }, methods: { reload () { this.isRouterAlive = false this.$nextTick(function () { this.isRouterAlive = true }) } } } </script> - 需要刷新的页面
在需要刷新的地方调用this.reload()export default { inject: ['reload']}
-webkit-line-clamp vue打包后不起作用
-
安装插件
npm i -S optimize-css-assets-webpack-plugin -
注释掉webpack.prod.conf.js中下面这段代码代码
new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } })
移动端Video标签的使用
- Android端禁止全屏：x5-playsinline=“true”
iconfont字体引用
- 在https://www.iconfont.cn上下载代码
- copy到vue的assets目录下
- 在main.js中引入css文件
- 在标签内引用样式即可
路由跳转不添加history
- 原生
window.loaction.replace()不添加history - vue
this.router.replace()替换当前路由不添加history
介绍几个开发过程中好用组件
- 滑动插件swiper
- 下拉刷新，上拉加载 mescroll.js 、better-scroll
（备注）第一次写md文档，感觉极度舒适
2282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
