记一次利用vue.js完成的h5与app的交互

唠叨：最近接收一个用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即可.添加之后的样子是这样的：

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

---