网站备案号怎么查询,东道设计考研,网站开发前端技术,网站栏目结构项目的大致需求就是做一个App#xff0c;里面集成各种功能供用户使用#xff0c;其中涉及到很多Vue的使用方法#xff0c;单独总结太麻烦#xff0c;所以通过这几篇笔记来梳理一下。原型图如下#xff1a;路由配置主界面会用到一些原生App方法#xff0c;比如验证用户身份…项目的大致需求就是做一个App里面集成各种功能供用户使用其中涉及到很多Vue的使用方法单独总结太麻烦所以通过这几篇笔记来梳理一下。原型图如下路由配置主界面会用到一些原生App方法比如验证用户身份等故由原生App完成进去的每个模块则全部都是HTML页面(有一种后端工作好轻松的感觉へ)。由于传统的HTML页面开发起来效率太低所以我选择了Vue来实现。每一个功能对应一个路由比如电脑报修对应/repair,repair这个路由下的子页面都放进子路由里。│├─repair│ apply.vue│ index.vue│ payment.vue│ repairList.vue│└─teambuildingapply.vueindex.vueconst router newRouter({mode:history,routes: [path:/repair,component: repair,children: [{path:apply, component: repairApply}, //电脑报修申请{path::id,//报修单详情component: repairDetail,children: [{name:evaluate, path: evaluate, component: repairEvaluate}, //服务评价{name: evaluatePay, path: pay, component: pay} //支付]}]]})为了减小打包时的体积在加载组件的时候采用了以下形式const repair resolve import(views/repair/index).then(module resolve(module))const repairApply resolve import(views/repair/apply).then(module resolve(module))const repairDetail resolve import(views/repair/detail).then(module resolve(module))这是按照官方文档提供的路由懒加载技术写的这样就能实现当路由被访问的时候才加载对应组件。以上是项目中关于路由的一些用法。注册全局组件接下来是全局组件的用法比如头部等待加载弹出层之类的组件几乎每个页面都有全局注册能省去不少事。import header from components/header/headerimport loading fromcomponents/loading/loadingVue.component(v-header, header)Vue.component(loading, loading)之后在每个页面中敲入就能直接使用了不用每次都去import。处理返回键还有一个比较常见的问题由于Vue做出来的页面是一个SPA在Android机中如果按下了物理返回键整个应用都会退出解决方法是重写物理返回键这样就能按路由一级一级地返回了。因为主界面是由原生实现的所以Vue只能返回到对应模块的首页比如从 /repair/apply - /repair - null 想要回到原生主界面需要后端向前端注入一段脚本在模块首页的后退按钮被点击时执行一段方法告知Android调用自身的逻辑然后Android关闭当前页面并回到主界面例如//在main.js中加入该方法window.AndroidMethod function(msg) {if (window.android ! null typeof(window.android) ! undefined) {window.android.callAndroid(msg);}}在头部组件header.vue中可以使用如下方式methods:{goback() {window.history.length 1 ? this.$router.go(-1) : this.$router.push(/)},backToHomePage() {AndroidMethod(backToHomePage)}}这样可以将模块首页的返回和子路由的返回区分开来。如果使用其他的打包工具比如apiCloud或者HBuilder它们都有各自的阻止物理返回按键的方法//apiCloudapi.addEventListener({name:keyback},function(ret, err){});});//HBuilder//https://blog.csdn.net/qq_25252769/article/details/76913083document.addEventListener(plusready, function() {var webview plus.webview.currentWebview();plus.key.addEventListener(backbutton, function() {webview.canBack(function(e) {if(e.canBack) {webview.back();}else{webview.close();}})});});同样的把这些代码放在main.js中即可打包后在真机里运行时会执行这些方法普通环境是不存在这些变量的。接收后端返回的数据有时候我们希望在Vue初始化时就能设置一些从服务器获取的常量比如userID等之后在各个组件中就能很方便地访问。设置全局变量很简单直接挂载在Vue.prototype后面即可axios.get(http://localhost/index.php).then(res {Vue.prototype.uidres.data.uidVue.prototype.appidres.data.appidnewVue({el:#app,router,store,render: hh(App)})})在组件中使用this.uid、this.appid就能访问到从服务器获取的常量了。如果是普通的js文件(比如apiutils等等)可以通过import Vue from vueVue.prototype.uid来访问。我们可能还希望这些数据在初始化时也能同时保存到Vuex中先来看一下最初的Store/index.js文件import Vue from vueimport Vuex fromvueximport* as actions from ./actionsimport* as getters from ./gettersimport state from./stateimport mutations from./mutationsexportdefault newVuex.Store({actions,getters,state,mutations})但这样就没有往Vuex中存入数据的机会这时就需要对Store文件夹中的index.js做一些小的封装使其返回一个方法functionbuidler(data) {return newVuex.Store({actions,getters,state: data,mutations})}exportdefault buidler然后修改main.js中调用Vuex的方式最初的代码如下import store from ./storenewVue({el:#app,router,store,render: hh(App)})修改后的代码如下import store from ./storeaxios.get(http://localhost/index.php).then(res {Vue.prototype.uidres.data.uidVue.prototype.appidres.data.appidnewVue({el:#app,router,store:store(res.data),render: hh(App)})})在组件的created方法中用MapGetters输出一下uid和appid发现值可以被打印出来说明这种实现方式是可以采用的。更新在后续的测试中发现一些机型特别是华为机(实测iOS没有此问题)对这种延后初始化Vue的方式兼容不好表现在所有路由的切换动画全部失效页面后退时会重新渲染页面(执行组件created方法中的内容)设置keep-alive也没有效果。不过水平有限实在弄不懂为什么会这样。为了兼容就不能采用上面的方式了。最后使用了在请求头中携带cookie的方式具体为webview加载vue页面时在requestURL中注入cookie在cookie中设置需要传递的值下面是用PHP模拟的一个小例子PHP加载HTML页并注入cookie在HTML加载时取到cookie。PHPHTML这样就能在main.js里同步拿到userIDVue也不用延迟初始化了Android机的表现效果和iOS一致。拿到userID后可以保存到配置文件config中在每个组件中访问config.uid就能拿到。better-scrollApp中最常见的组件就是滚动数据列表由此又很容易联想到better-scroll这个插件。better-scroll虽然好用但如果使用不当还是会造成不小的麻烦一些错误甚至无从排查。这里主要记录一下下拉刷新和上拉加载更多的实现。容器结构如下最外层的div限制滚动内容的位置srcoll是官网提供的已经封装好的组件里面正常置入ulli形式的列表就行了ul和li都不需要特殊的样式。由于官网提供的例子中整合了许多文件查阅起来不是很方便于是将其剥离出来写了一个只有上拉加载和下拉刷新的Demo方便以后使用。使用scroll时要慎用v-show指令比如我希望使用下面的代码来控制没有数据时容器的显示与隐藏由于数据是异步加载刚开始时容器不显示直到数据加载好为止。data() {return{dataList: []}}但这样会造成scroll组件内部高度计算错误(offsetHeight被计算成0这是由于容器处于display:none状态)如果此时列表的数据没有达到滚动要求上拉和下拉的提示文字会显示在列表下方网速慢时也无法使用上拉下拉功能。解决方法是使用v-if指令这样容器的min-height高度就能被正确计算了。图片上传另外一个功能是图片上传这个功能并非由前端完成而是和上面一样通过后台返回的一段函数体拿到上传图片的路径并展示出来。相册和拍摄都由后台调起前端只需要进行简单的传值就行了AndroidMethod(photo)AndroidMethod(video)代码是和后端约定好的所以不需要操心。真正需要关注的是从后台返回的图片上传路径拿到这个路径后要在前台展示并且保存时要带上一个或多个路径组成的字符串。这个方法同样是和后台约定好的方法window.getUpload function(path) {//这里要将path保存起来拿到组件里使用}这里就需要使用全局变量将path保存起来假定这个全局变量叫做uploadImgUrl初始化时是一个空数组只有当用户从相册里选择图片上传后才将拿到的路径赋给这个全局变量。Vue组件中要监听这个全局变量的变化就不能使用Vue.prototype.uploadImgUrl这种方式了因为Vue要监听某个变量的变化必须将这个变量放在data中改进一下之前的代码import store from ./storeaxios.get(http://localhost/index.php).then(res {Vue.prototype.uidres.data.uidVue.prototype.appidres.data.appidlet vm newVue({el:#app,router,data() {return{uploadImgUrl: []}},store:store(res.data),render: hh(App)})window.getUpload function(path) {vm.uploadImgUrlpath}})上面将变量存放在根组件的data中在其它组件内就可以通过以下形式访问到this.$root.$data.uploadImgUrl虽然拿到了路径但问题还没有结束因为这个值是动态变化的需要使用计算属性来监测它的变化下面是核心代码 data() {return{loadedImgs:[]//保存已上传的图片}},methods: {deleteImg(index) {for (let i 0; i this.loadedImgs.length; i) {if (index i) {this.loadedImgs.splice(i, 1)break}}},computed: {imgsList() {this.loadedImgs this.loadedImgs.concat(this.$root.$data.uploadImgUrl)this.$root.$data.uploadImgUrl []　　//每次合并完重置一下return this.loadedImgs}},created() {this.$root.$data.uploadImgUrl []　　//组件创建时先重置一下之前的值}}}通过computed计算属性无论是添加图片或者删除图片都能正确展示了。真机调试在真机上调试非常不方便很多调试信息看不到不过vconsole这个插件解决了这个问题安装方法非常简单在依赖里(开发环境或正式环境均可)安装vconsole然后在main.js中import Vconsole from vconsolenew Vconsole()打开页面就能看到右下角多出了一个vConsole的图标项目中所有console.log的信息都会输出到这个vConsole面板里。结束知识点比较繁杂所以文章有点乱暂时先总结到这后续还有很多坑待填。