评论

mpvue-转uni-app的那些事

分享 mpvue 框架转 uni-app 框架遇到的一些问题,及使用记录

框架与框架之间的转换,总是避免不了差异,本来已经可以游刃有余的处理原有框架的一些非预料行为,哈哈哈,突然,uni-app已优化了性能的招牌横空出世,我也被此吸引,开始了我的新的框架之旅!

今天就分享一些遇到的问题吧!

框架部分

通过 Vue-cli 命令 事项

  1. 升级 vue-cli命令: npm install -g @vue/cli (老版本的 vue init 命令,可通过桥接的方式使用)
  2. 创建 uni-app 项目 vue create -p dcloudio/uni-preset-vue my-project
  3. npm install
  4. 过程当中有需要用到其他的依赖的,需要自行安装,如 sass

关于 sass 的使用

  • 安装sass依赖时,需要指定 sass-loader 安装版本,目前我安装的是 @7.03.01可以通过,否则会提示当前sass-loader加载程序与架构不符
  • node-sass 无需指定版本
  • 在 “.vue” 文件中 声明 “<style lang=“scss”>” ,则 @import 引入 “.css” 后缀文件会报错

关于环境变量的配置

  • 在 package.json 下定义环境变量
// pageck.json
{
	...
    "uni-app": {
    	"scripts": {
            "test": {
            	"title": '测试环境', 	// 可用于 HBuilderX 编辑器的显示
                "env": {
                    "UNI_PLATFORM": "mp-weixin",
                    "BASEURL": "请求路径"
                }
            }
        }
    }
}
  • 在 package.json scripts 中引用
// package.json
{
	"scripts": {
    	// 使用自定义打包命令项,指定上面定义的 test( custom 后面的字段), 便可关联起来
        "dev:test": "cross-env NODE_ENV=development uniapp-cli custom test"
    }
}
  • 在 pages.json 配置“微信开发工具”的当前页面
// pages.json
{
	...
    "condition": {
    	"current": 0,
        "list": [
           {
            	"name": "测试页面""path":"pages/test/main",
                "query":"a=1&b=2"
            },
            ...
        ]
    }
}

mpvue与uni-app的一些区别

  • 程序启动后,mpvue会执行一遍全部所有页面,而uni-app则是当前激活页面
  • 模板循环中,mpvue支持隐式的 “index” 使用,而 uni-app 则不行,如未更正,会导致事件触发不成功
  • 模板中,mpvue支持,uni-app 不支持直接赋值对象

关于uni-app的组件使用

  • 组件向页面抛出事件参数为对象时,对象中属性是 undefined 的会被自动过滤掉
  • 对象转字符串比较,需要手动使用 JSON.stringify 方法转字符串比较
  • 不支持函数式组件 functional 选项
  • 不支持 $attrs, $listens 使用

还有个无奈的一点

  • 通过 外部定义的对象,或者 函数返回一个对象,包含 components 选项会被自动过滤掉
// 第一种写法
var o = {
	components:  { test },
    onLoad(){ ... },
    ....
}
expoft default o;

// 第二种写法, 为了简洁省略了 vuec 函数的内部实现
function Vuec(opt){
	return {
    	...opt
    }
}

export default Vuec({
	components: { test },
    ....
});
  • 以上两种写法都会被忽略,于是乎我得代码中就有了这么一段

这里的Vuec 函数起到一个注入全局数据的方便之处,还有归纳 方法与计算函数的功能

如约定 _开头的函数为方法, 以$函数开头的函数为计算属性,这样在模板中使用就比较清楚使用的是什么

如果有验证结果与我不符的,希望能被指正!
如果有我没有列举出来的,希望能够被补充!

最后一次编辑于  09-15  
点赞 1
收藏
评论