mpvue入坑之APP.vue不同之处

小程序开发

目前的前端行业小程序开发真的是一发不可收拾了，我也加入了这股入坑潮流。下面我来说说我经验吧

一、原生wx框架和mpvue

我告诉你，如果你会原生的wx框架最好用wx原生的框架， mpvue虽然和vue的语法一样但是它本质还是把vue框架格式的代码编译成了wx小程序的。
所以说用原生的微信框架既可以对小程序的设计概念和生命周期更好理解。因为我个人一直用的是vue-cli所以我选择用的是mpvue，后来才发现这个坑有点深。
如果你已经很熟悉原生的方式开发了，那可以继续采用原生，原生的方式永远是最灵活、保持最新不过时的。如果你有时间的话，mpvue之类的第三方框架你也可以学习了解下他们的思想。

二、上手

基本的创建，此类文章很多

#创建一个小程序工程
vue init mpvue/mpvue-quickstart my-project

运行工程，运行后用微信开发者工具导入这个工程, mpvue会自己编译成微信的代码格式，编译后的代码路径在dist目录下

npm run dev

三、入坑之APP.vue

工程里面的APP.vue是这样的

<script>
export default {created () {// 调用API从本地缓存中获取数据/** 平台 api 差异的处理方式:  api 方法统一挂载到 mpvue 名称空间, 平台判断通过 mpvuePlatform 特征字符串* 微信：mpvue === wx, mpvuePlatform === 'wx'* 头条：mpvue === tt, mpvuePlatform === 'tt'* 百度：mpvue === swan, mpvuePlatform === 'swan'* 支付宝(蚂蚁)：mpvue === my, mpvuePlatform === 'my'*/let logsif (mpvuePlatform === 'my') {logs = mpvue.getStorageSync({key: 'logs'}).data || []logs.unshift(Date.now())mpvue.setStorageSync({key: 'logs',data: logs})} else {logs = mpvue.getStorageSync('logs') || []logs.unshift(Date.now())mpvue.setStorageSync('logs', logs)}},log () {console.log(`log at:${Date.now()}`)}
}
</script><style>
.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;
}
/* this rule will be remove */
* {transition: width 2s;-moz-transition: width 2s;-webkit-transition: width 2s;-o-transition: width 2s;
}
</style>

以前使用vue.2x的时候一直都是把公共能用到的组件放在app.vue这个文件里，页面通过route进行切换
小程序怎么做的呢？他有个配置文件json格式的
里面配置了你需要引入的包和需要切换的组件路径，替代了route
其次你的工程初始化后APP.vue里面是没有template标签的
我第一次尝试了一下发现你不管在里面写什么都不会显示在页面

结束

后来发现App.vue中是不能写html的！！！友情链接有我的博客和github地址，欢迎相互沟通学习！

想一起讨论/学习微信小游戏开发的，GO语言开发的，请微信搜索下方小程序加博主微信群

mpvue入坑之APP.vue不同之处相关推荐

mpvue入坑之npm run dev卡住
问题描述在构建一个mpvue项目的完毕之后,并且把依赖包都下载完成之后需要npm run dev运行项目,但是问题来了,既然卡死不动了.问题出现在mpvue小程序开发中. 场景复现 $ npm ru ...
mpvue入坑之数据修改不变化
问题描述在拿到后台返回的数据之后需要重新修改data中数据的值,方便页面重新渲染. 在初始化的时候需要对数据进行校验和重新赋值操作但是问题来了,赋值不生效,data中的值并没有发生改变,查看微信开 ...
mpvue入坑之背景图片无法使用
问题想要给当前的元素设置一个背景图片,但是background-image:url()无效? 前奏在微信小程序上不管你是这样使用标签引入 <view style="backgrou ...
mpvue入坑之修改数据页面不刷新
问题小程序开发是都会遇到数据更新了,但是页面的图元状态并没有更换. 通过接口获取数据进行更新, 但是数据改变了,页面的图元并没有变化. 方法一赋值之前先把数据置为空null, 在进行从新赋值操作 ...
Vue React Angular之三国杀，web前端入坑第六篇上
「懒癌引发血案」目前前端技术栈发生了翻天覆地的变化,上篇刚写了只会jquery 要失业,再不学新的你就要被淘汰,虽然有点危言耸听,不过现实情况确实是这样. vue.react.angular对比 ...
Vue、React、Angular之三国杀，web前端入坑第六篇(上)
「懒癌引发血案」目前前端技术栈发生了翻天覆地的变化,上篇刚写了只会jquery 要失业,再不学新的你就要被淘汰,虽然有点危言耸听,不过现实情况确实是这样. vue.react.angular对比 ...
入坑VUE的一点心得
前言本人专业做后台,有一定前端基础,最近想不通学了几天VUE,由于入坑过程有点小心酸, 想想还是记下来吧,一则是总结,说的不一定对,再则看看能不能给后入坑的人一点帮助吧 1.关键地址,具体作用后面会 ...
基于鸿蒙系统的APP测试技术，快来入坑
说到移动端的测试,可能大家能够想到的是在Android和Ios系统下来进行,那么随着华为鸿蒙系统的广泛应用,测试的关注点也有了新的领域.据官方的数据显示,华为鸿蒙系统已经被上亿的用户所使用,而搭载鸿蒙 ...
最好的Vue组件库之Vuetify的入坑指南（持续更新中）
目录安装Vuetify 文档结构快速入门特性样式和动画首先先声明,个人不是什么很牛逼的大佬,只是想向那些想入坑Vuetify的前端新手或者嫌文档太长不知如何入手的人提供一些浅显的建议而已,能 ...

mpvue入坑之APP.vue不同之处

小程序开发

一、原生wx框架和mpvue

二、上手

三、入坑之APP.vue

结束

想一起讨论/学习微信小游戏开发的，GO语言开发的，请微信搜索下方小程序加博主微信群

mpvue入坑之APP.vue不同之处相关推荐

最新文章

热门文章