美丽的泡沫

前面我们梳理了mpvue的各种开发结构，mpvue会编译生成满足微信小程序的原生代码，为了更熟更了解，我们还是需要看一看的，接下来就让我们一探究竟 在项目的dist目录下，我们清楚的看到了微信原生代码结构，嗯，非常的清晰 common：公共js components：模块 pages：微信页面存放地 static：一些静态的东西 app.js：启动js app.json：各种配置...

我们把小程序开发完了，想分享一个页面，那么如何操作呢 一：给按钮绑定分享功能 <button open-type="share" class="cu-btn bg-green lg">邀请</button> 嗯，如上，添加 open-type="share"，表示分享 二：添加分享方法 如果添加方法，则默认截图是分享所在的功能页面，高宽5：4 三：...

说到这也是头大，那是一个疼啊，上篇我们讲了less的使用【点击查看】，这次我们来点实在的：记v-for的超级深坑 事情是这样的，我们一般都会有数组/列表需要遍历，自然想到了v-for，但是某种情况，我要遍历一个数字，比如说5，大家会说这不简单嘛，v-for="(item,key) in 5"，这不就完事了，殊不知危险降临 先看重点代码部分 <div class="bg-g...

有的时候我们想要更美观的样式，但是代码很蛋疼，代码一多就没层级感了，有没有类似yml这样的，答案是肯定的：less 一：下载 在项目目录下运行命令：npm install less less-loader --save 二：配置 在项目中搜索文件webpack.base.conf.js，然后添加如下内容 { test: /.less$/, loader: "style-loader!c...

前面我们把配置文件app.json详解了一下【点击查看】，现在我们离开发越来越近了，啥也不多说，搞起搞起 我们主要看pages目录，这个是我们以后开发的重中之重 嗯，我们先看到共性，每个文件夹中都有index.vue和main.js 其中index.vue就是我们的页面内容，我们打开index目录下的index.vue文件看一下 <template> <div ...

前面我们对小程序开发目录进行了讲解【点击查看】，现在我们对其中的重头文件app.json进行剖析 打开app.json，我们看到很多配置文件，那真的琳琅满目，看的眼花缭乱，不过我们都是老司机了，也能猜个一二不离三 格式都是json类型，这也和文件名app.json遥相呼应，可见作者这点还是很睿智的，减少了键盘侠的出现 我先贴出来整体内容，然后再分解 { "pages": [ ...

前面简单的搞了一下【点击查看】，现在我们对项目结构来一个清晰的认识 因为我们是mpvue开发，所以我们的关注点主要在src目录下【static目录下主要放置静态文件，所以没啥好讲的，这个因人而异啦】 上图就是src的整体结构了 components：搞过vue的都知道，公共组件 pages：这个就是小程序中的页面了 utils：这个就是一些公共的js啊，之类的，比如格式化时间啊，金额...

嗯，前面把各种配置啊，结构啊都看了，【点击查看】现在我们要正式开发一个小程序了，今天我们打算开发一款考试的小程序 start…… 一：样式引入 在src目录下新建static/css目录，再把样式文件丢进去，然后再main.js中引入 【样式下载地址【点击获取】https://download.youkuaiyun.com/download/stronglyh/11252782】 二：...

前面我把小程序给跑起来了并进行了展示【点击查看】，如下图 对于上述图片，我们看到了小程序的一个布局 正文部分是小程序，下面有两个tab，嗯，这个跟原生app很像嘛，那一定是能改的 那么在哪改，怎么改呢 我们打开开发工具，导入项目，我的是WebStorm 我们看一下项目结构 哇，我们清楚的看到了dist/wx和src两个目录惊人的相似 对，src下面的就是接下来我们开发要使用的...

前面我们把小程序搭建改成搞了一遍，现在我们写个简单的小程序看下效果 我们从官网下载 微信web开发者工具，然后打开软件 如上图，点击加号，添加我们创建的项目 如上图，导入项目，选择对应的项目，点击“导入”按钮 出现如上界面，就表示我们的小程序可以展示了，接下来就是编写我们的小程序，我会带着大家一步一步做下去，这将是一个完整的例子 ...

一：开发环境 1：前端开发环境是少不了nodejs的，所以我们先判断是否有 使用上图命令node -v进行判断，如果出现版本号，则证明已经安装了，如果没有，则需要去官网下载安装 2：包管理工具，这个也少不了，因为开发环节中时不时会引入相关包包 使用上图命令npm -v进行判断，如上图则进行了安装，如何安装则需要自行百度 3：切换源 由于可能包被墙或者太远了下载慢等缘故，可以考虑...

在小程序的开发中难免会遇到数值相加 比如我们如下定义 var a=3 var abc=a+1 得到的结果是31，额，这是字符拼接啊，明显不是我们想要的，那么该如何是好 如果是html中，我们可以这样处理 var abc=parseInt(a)+parseInt(1) 但是在小程序中有一个妙招，就是先减少后加 如上 var abc = a-1+2 这样得到的结果就是4了，是我们想要的...