mpvue小程序开发（三）：改我所改

最新推荐文章于 2023-09-06 18:13:32 发布
最新推荐文章于 2023-09-06 18:13:32 发布
阅读量334 收藏
点赞数
分类专栏： 小程序 vue mpvue js 文章标签： mpvue 小程序开发 小程序tab修改 mpvue小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stronglyh/article/details/92401483
版权
js 同时被 3 个专栏收录
38 篇文章 0 订阅
订阅专栏
vue
14 篇文章 0 订阅
订阅专栏
mpvue
13 篇文章 1 订阅
订阅专栏

前面我把小程序给跑起来了并进行了展示【点击查看】，如下图

对于上述图片，我们看到了小程序的一个布局

正文部分是小程序，下面有两个tab，嗯，这个跟原生app很像嘛，那一定是能改的

那么在哪改，怎么改呢

我们打开开发工具，导入项目，我的是WebStorm

我们看一下项目结构

哇，我们清楚的看到了dist/wx和src两个目录惊人的相似

对，src下面的就是接下来我们开发要使用的代码，dist中的代码是自动编译生成的微信小程序员代码，所以dist中的代码你不要动，要改就改src下面的代码就可以了

嗯，现在我们需要修改tab，我们用快捷键搜索：订单

果然搜到了，是app.json文件，现在我们打开这个文件，进行修改，比如改成“我的”

我们回到开发者工具，发现并没有更新，这个时候我们再开发者工具上查看一下dist目录文件，我们发现响应的位置并没有更新，那么该如何是好呢

不用急，我们命令行进入到工程目录下执行npm run dev

重新编译完成了，这个时候我们再回到开发者工具，我们发现，一切都ok了

嗯，到这为止，我们可以修改一些小东西了，下一篇讲解配置文件，我们拭目以待

你所有承诺
关注
专栏目录
微信小程序开发之——mpvue开发小程序(1)
2401_84149570的博客
04-20 1125
我的面试经验分享可能不会去罗列太多的具体题目，因为我依然认为面试经验中最宝贵的不是那一个个具体的题目或者具体的答案，而是结束面试时，那一刻你的感受以及多天之后你的回味~很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候，总会遇到一些问题，比如学了一段时间感觉没有方向感，不知道该从那里入手去学习，对此我整理了一些资料，需要的可以免费分享给大家在这里小编分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含。
mpvue小程序开发（八）：项目开发
美丽的泡沫
06-21 425
嗯，前面把各种配置啊，结构啊都看了，【点击查看】现在我们要正式开发一个小程序了，今天我们打算开发一款考试的小程序 start…… 一：样式引入 在src目录下新建static/css目录，再把样式文件丢进去，然后再main.js中引入 【样式下载地址【点击获取】https://download.csdn.net/download/stronglyh/11252782】 二：...
mpvue 使用wxParse解析html
adai_zhu的专栏
05-08 192
1.参考git:https://github.com/F-loat/mpvue-wxParse 2.安装 npm i mpvue-wxparse 3.使用 <template> <div> <wxParse :content="article" @preview="preview" @navigate="navigate" /> </div> </template> <script> import wxParse...
微信小程序代码修改无效
smile_foreach的博客
10-12 2055
dist编译后的文件不能修改，只能修改源代码，重新编译。
uni-app 开发微信小程序 自动化编译/启动项目
weixin_63212264的博客
05-23 1万+
最近开发一个uni-app的小程序项目，因为习惯使用vscode 而项目不得不借助hbuderx 运行，微信开发工具调试，偶尔还需要使用 ios模拟器，8g内存的mac 就变的异常卡顿，所以就研究了下通过npm命令去编译、 运行等工程化配置, 这样就不用运行hbuderx 减少内存使用，顺便记录下从需求到完善功能的过程，以及遇到的问题，解决的方案。...
小程序使用wxParse解析html
qq_41818857的博客
08-21 202
1、下载wxParse文件 https://github.com/icindy/wxParse 2、在app.wxss全局样式文件中，需要引入wxParse的样式表 @import "/page/wxParse/wxParse.wxss"; 3、在需要加载html内容的页面对应的js文件里引入wxParse var WxParse = require('../../wxParse/wxParse.js'); 4、通过调用WxParse.wxParse方法来设置html内容 /** * WxParse.w
将Vue项目迁移到微信小程序中
旭日的博客
09-06 4919
微信小程序是一个独立的平台，需要自己构建，不能直接将vue.js应用程序上传至微信小程序平台。需要把你的vue.js应用程序构建成微信小程序。在你的Web浏览器中打开URL http://localhost:8080，你应该可以看到你的vue.js应用程序正在运行。现在你需要将你的vuejs组件转换为小程序组件。这可以通过在vuejs组件顶部添加。使用 Vue-Cli 脚手架创建一个新的Vue.js应用程序。将构建上传至微信小程序平台所需的文件在vue.js项目的。
Mpvue 小程序转 Web 实践总结
03-29
框架基于 Vue.js 核心，修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验，同样也使得一套代码同时复用在小程序和 Web 中成为可能。...
mpvue开发小程序所遇问题及h5转化方案
03-29
项目结构 ... |---format格式化插件，小程序中不能使用vue自带的格式化只能手动修改后台返回的时间戳，价格，订单状态等 |---request封装fly进行请求响应拦截 |---wx.js 环境及依赖 less-loader,提供
mpvue开发的音乐播放器微信小程序
最新发布
05-30
框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。 #主要特性 使用 mpvue 开发小程序，你将在小程序技术体系...
vue移动端项目迁移到uniapp，并兼容小程序
qq_41231694的博客
06-09 7118
H5中，如果在main.js中使用Vue.prototype.定义一个属性，这时候如果把这个属性使用在视图上，当属性变化的时候，视图也会跟着变化。这样能避免分包不能引用分包的问题。，如果你停留在这个页面，又去改变了Vue.prototype.data，视图还是不会刷新。项目中ui组件在uniapp中大概率是不兼容的，比如：我们vue移动端常用的组件有。除了tabbar的icon图标，其他的图片全部迁移到服务器上，通过链接的形式访问。这时可以去uniapp官网的插件市场，找到兼容的ui组件，比如。
Vue项目迁移小程序，实操干货分享
Lydiasq的博客
03-14 1113
前面发布了很多文章向大家分享前端、小程序相关的知识，最近很多小伙伴说想看实操，这不就安排起来了吗！今天就给大家分享“Vue 项目转小程序”的实操干货。首先明确需求：开发者是想将已有的 Vue 项目转为小程序，在集成了SDK 的 App 中运行小程序，那这里我们就需要关注以下两个注意事项：Web项目是适合在手机等移动设备中运行的，屏幕已经兼容；H5项目的代码是前后端分离的；在本篇文章中，我们选择使用了一款成熟的跨平台框架 uni-app 来处理这个问题。
美团开源用mpvue,可以用vue开发小程序了！
热门推荐
jackie_bobo的博客
03-15 2万+
档传送门：官方文档说明如何看待美团开源的 mpvue ? 先来看一下，知乎的大佬们对mpvue的看法…………. mpvue 简介mpvue （github 地址请参见）是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js
mpVue 在vscode中修改之后，微信开发者工具不编译问题
Z姑娘早安
06-21 7899
** 坑坑坑坑！！！！！！！！ ** 自研第一个微信小程序，先看初始化一个小程序的5分钟教程 通过 Vue.js 命令行工具 vue-cli，你只需在终端窗口输入几条简单命令，即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目： 全局安装 vue-cli $ npm install –global vue-cli 创建一个基于 mpvue-quickst...
用 mpvue 写的小程序，代码在VScode和微信小程序开发工具同步问题 (小白上路~)
qq_18314469的博客
12-20 6367
场景描述： 昨天把 mpvue 微信小程序在 VScode 和微信小程序开发工具中一起打开，在 VScode 里面修改完代码，小程序开发工具里面没有任何变化，经过检查发现，没有进入开发环境。 解决办法： cd 命令定位到项目某一级目录（该级目录包含 package.json 文件），运行命令：npm run dev...
如何实现vue项目打包后的dist文件可以让用户自由更改访问地址
qq_36877078的博客
10-22 4743
开发项目过程中，可能会遇到这种需求 开发好的项目，不给用户源代码，只给用户打包后的dist文件，同时，又需要用户能够自主更改项目里的访问地址。这就要求代码中的地址，不能写死了，需要给暴露出来供用户自己更改 在static文件夹下，新建一个config.js文件，用来存放访问地址。static文件夹中的文件是不被编译的 如何引用，引用时注意，需要在index.html中引入，如下不要直接在webpack.base.conf.js和http.js等需要用到该地址的地方才引入，因为在那些文件中引入，打包后
用vue来开发小程序项目详解，极大方便了开发者
开心大表哥
03-14 1万+
案例图： 五分钟教程： 通过 Vue.js 命令行工具 vue-cli，你只需在终端窗口输入几条简单命令，即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目： # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpv...
使用mpvue框架,从零开始搭建微信小程序项目
愚人码头的博客
11-28 365
1. 先检查下 Node.js 是否安装成功,注意node版本需要不低于8.9.0 $ node -v v8.9.0 $ npm -v 5.6.0 2. 切换npm源为 taobao 源 $ npm set registry https://registry.npm.taobao.org/ 3. 全局安装 vue-cli # 一般是要 sudo 权限的 $ npm install --glo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值