唠叨:最近接收一个用vue写的项目,对我来说甚是头大。不得不说这是对传统前端的一次大过滤,之前仗着html,css,js混饭吃的前端儿们,压力越来越大,我就是这样的一个例子。压力越大,只要不放弃,成长的也越快啊,所以,咬牙就咔咔开始干。

需求:一个H5分享页面,要分享的页面上的东西是动态的,需要app在h5页面的url后面拼接参数(为防止渲染时出现乱码现象,最好对这些参数值进行编码)传递给h5,h5利用js获取app传递的参数进行解码并一一对应渲染到这个页面上。

这里写图片描述

看了上图应该就很清楚了吧。

开工:首先利用vue-cli这个脚手架工具搭建模板,在src目录下面的commponents目录下创建一个组件,我给这个组件命的名是QuatationShare.vue,组件名首字母必须大写这是规范,项目中必然需要写很多单页,每个页面之间的切换必然要用到路由router,我们在配置环境,搭建脚手架的时候其实router已经自带了,不必单独安装,可以直接使用,但是方便自己配置,我们就在router这个目录下创建一个和index.js平级的routes.js,在routes.js中

import QuotationShare from '../components/QuotationShare';
export default [
{
path: '/quotation-share/:userid/:id/:test',
name: 'quotation-share',
component: QuotationShare,
}
]

/:userid/:id/:test是动态id,练习的时候可以不用加这些,看自己需要,如果加了,打开页面进入index.html之后把这些路径添加到url后面即可路由到你的组件。
导入这个组件,然后在index.js中,添加:

import routes form './routes';
Vue.use(Router);export default new Router({
    routes,
});

这些代码即可。
在cnpm run dev调试的时候你可能会在后台看到一片报红,甚至程序都没法进行,这个时候你只需要到build目录下找到webpack.base.conf.js这个文件,然后在rules部分找到

{
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
  formatter: require('eslint-friendly-formatter')
 }

这段代码,并注释掉,就ok了,这段代码决定是否对代码进行严格检查,多一个空格,少一个逗号,分号等根本注意不到的细节都会导致代码无法进行下去,报的错还总是找不到原因。所以注释掉之后,书写代码就自在多了。如果注释掉之后还是报错,还是无法打开页面,你又确认自己的代码没有错误的时候,你可以看看你是不是cnpm run dev了多次,打开了多个dos窗口,我就在这上面栽了不止一次。

然后就是组件部分的书写了template script style是一个组件的三大模块,分别对应传统web页面中的html js css,我在这里是用less写的样式,并且写到了assets下面新建的less目录下面,然后在main.js中添加

import './assets/less/main.less';

这样就可以了。这样就不用在组件里面写style啦。template里面就照着之前写html格式一样开写就行了。但是一定要注意最外层div只能有一个,而且动态的数据需要通过vue的双向绑定来实现,不要写死哦。下面这个是错误的示范:

这里写图片描述
这才是正确的示范:

这里写图片描述

然后就是js部分了,首先在script标签里面导入自己需要用到的插件

import axios from 'axios';
import 'url-search-params-polyfill';
import InfiniteLoading from 'vue-infinite-loading/src/components/InfiniteLoading';

然后,“导出”部分的代码就是要执行的代码了。也就是说我们所要写的代码都在
export default {}
这个花括号里面了。代码如下:

beforeRouteEnter(to, from, next) {
   next(vm => {
        vm.contentId = to.params.id;
        if (to.params.userid === 0) {
            vm.userId = 0;
        } else {
            vm.userId = to.params.userid;
        }
        vm.testId = to.params.test;
    });
},
components: {
    InfiniteLoading,
},
data() {testObj:{},},
mounted() {self.onInfinite();},
methods: {
onInfinite() {
            const self=this;
            let url='';
            let str='';
            let strs='';
            //获取本页面的url
            url=window.location.href;
            console.log(url);
            if(url.indexOf("?")!=-1) { 
            //截取url里面?之后的字符串(也就是传递的参数值)
                str = url.substr(url.indexOf("?")+1);
                strs = str.split("&"); 
                let result = "";
                for(let i=0;i<strs.length;i++) { 
                    let key = strs[i].split('=')[0];
                    let value =decodeURI(strs[i].split('=')[1]);
                    if(i%2!=0){
                    //对图片链接之类的参数值的解码
                        value =decodeURIComponent(strs[i].split('=')[1]);
                    }else{
                    //对中文以及其他奇怪符号的参数值的解码
                        value =decodeURI(strs[i].split('=')[1]);
                    }
                    if (i == 0) {
                        result += "{"+key+":'"+value+"',";
                    } else if (i == strs.length-1) {
                        result +=key+":'"+value+"'}"
                    } else {
                        result += key+":'"+value+"',"
                    }

                } 
                //将json串转变为对象
                self.testObj = eval('(' + result + ')');
                self.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
               }    
            },
        },
     watch: {
            testObj: { deep: true,}
            }

基本上就这些了。分享的代码我就不展示了。存在二次转发简介变链接的bug。
然后这些都完成之后,假设项目做完了,该如何部署到服务器上,首先利用ftp上传到测试服务器,将项目cnpm run build之后生成的dist目录下的所有文件复制到ftp正确的目录下,如果项目无法跑起来,这时候你可以找到build目录下的webpack.prod.conf.js这个文件,然后在output中添加publicPath:’./’,然后重新打包复制到ftp即可.添加之后的样子是这样的:

这里写图片描述

很多,都是自己踩过的坑。希望帮到和我一样的新手吧。


Logo

前往低代码交流专区

更多推荐