mpvue
你所有承诺
这个作者很懒,什么都没留下…
展开
-
mpvue小程序开发(七):原生结构
前面我们梳理了mpvue的各种开发结构,mpvue会编译生成满足微信小程序的原生代码,为了更熟更了解,我们还是需要看一看的,接下来就让我们一探究竟在项目的dist目录下,我们清楚的看到了微信原生代码结构,嗯,非常的清晰common:公共jscomponents:模块pages:微信页面存放地static:一些静态的东西app.js:启动jsapp.json:各种配置...原创 2019-06-19 10:22:19 · 511 阅读 · 0 评论 -
mpvue小程序开发(十一):分享转发
我们把小程序开发完了,想分享一个页面,那么如何操作呢一:给按钮绑定分享功能<button open-type="share" class="cu-btn bg-green lg">邀请</button>嗯,如上,添加 open-type="share",表示分享二:添加分享方法如果添加方法,则默认截图是分享所在的功能页面,高宽5:4三:...原创 2019-07-28 16:38:15 · 1714 阅读 · 1 评论 -
mpvue小程序开发(十二):获取地图
我们在开发小程序的时候有时候会用到地图,下面我们就来一探究竟正所谓会者不难,难者不会啊,楼主也是搞了好大一阵子,还好搞定了如上的地图按钮,我们想点击的时候出现地图,然后可以选择,代码如下<div class="cu-form-group"> <div class="title">活动地点</div> ...原创 2019-07-30 21:20:12 · 597 阅读 · 0 评论 -
mpvue小程序开发(十):v-for的深坑
说到这也是头大,那是一个疼啊,上篇我们讲了less的使用【点击查看】,这次我们来点实在的:记v-for的超级深坑事情是这样的,我们一般都会有数组/列表需要遍历,自然想到了v-for,但是某种情况,我要遍历一个数字,比如说5,大家会说这不简单嘛,v-for="(item,key) in 5",这不就完事了,殊不知危险降临先看重点代码部分 <div class="bg-g...原创 2019-07-17 18:11:55 · 410 阅读 · 0 评论 -
mpvue小程序开发(九):使用less
有的时候我们想要更美观的样式,但是代码很蛋疼,代码一多就没层级感了,有没有类似yml这样的,答案是肯定的:less一:下载在项目目录下运行命令:npm install less less-loader --save二:配置在项目中搜索文件webpack.base.conf.js,然后添加如下内容{ test: /.less$/, loader: "style-loader!c...原创 2019-07-16 20:56:45 · 330 阅读 · 0 评论 -
mpvue小程序开发(六):代码结构
前面我们把配置文件app.json详解了一下【点击查看】,现在我们离开发越来越近了,啥也不多说,搞起搞起我们主要看pages目录,这个是我们以后开发的重中之重嗯,我们先看到共性,每个文件夹中都有index.vue和main.js其中index.vue就是我们的页面内容,我们打开index目录下的index.vue文件看一下<template> <div ...原创 2019-06-18 15:37:10 · 482 阅读 · 0 评论 -
mpvue小程序开发(五):app.json详解
前面我们对小程序开发目录进行了讲解【点击查看】,现在我们对其中的重头文件app.json进行剖析打开app.json,我们看到很多配置文件,那真的琳琅满目,看的眼花缭乱,不过我们都是老司机了,也能猜个一二不离三格式都是json类型,这也和文件名app.json遥相呼应,可见作者这点还是很睿智的,减少了键盘侠的出现我先贴出来整体内容,然后再分解{ "pages": [ ...原创 2019-06-18 14:57:14 · 2385 阅读 · 0 评论 -
mpvue小程序开发(四):惊鸿一瞥
前面简单的搞了一下【点击查看】,现在我们对项目结构来一个清晰的认识因为我们是mpvue开发,所以我们的关注点主要在src目录下【static目录下主要放置静态文件,所以没啥好讲的,这个因人而异啦】上图就是src的整体结构了components:搞过vue的都知道,公共组件pages:这个就是小程序中的页面了utils:这个就是一些公共的js啊,之类的,比如格式化时间啊,金额...原创 2019-06-18 10:31:45 · 410 阅读 · 0 评论 -
mpvue小程序开发(八):项目开发
嗯,前面把各种配置啊,结构啊都看了,【点击查看】现在我们要正式开发一个小程序了,今天我们打算开发一款考试的小程序start……一:样式引入在src目录下新建static/css目录,再把样式文件丢进去,然后再main.js中引入【样式下载地址【点击获取】https://download.csdn.net/download/stronglyh/11252782】二:...原创 2019-06-21 21:20:40 · 425 阅读 · 0 评论 -
mpvue小程序开发(三):改我所改
前面我把小程序给跑起来了并进行了展示【点击查看】,如下图对于上述图片,我们看到了小程序的一个布局正文部分是小程序,下面有两个tab,嗯,这个跟原生app很像嘛,那一定是能改的那么在哪改,怎么改呢我们打开开发工具,导入项目,我的是WebStorm我们看一下项目结构哇,我们清楚的看到了dist/wx和src两个目录惊人的相似对,src下面的就是接下来我们开发要使用的...原创 2019-06-16 16:22:09 · 334 阅读 · 0 评论 -
mpvue小程序开发(二):小试牛刀
前面我们把小程序搭建改成搞了一遍,现在我们写个简单的小程序看下效果我们从官网下载 微信web开发者工具,然后打开软件如上图,点击加号,添加我们创建的项目如上图,导入项目,选择对应的项目,点击“导入”按钮出现如上界面,就表示我们的小程序可以展示了,接下来就是编写我们的小程序,我会带着大家一步一步做下去,这将是一个完整的例子...原创 2019-06-16 11:15:07 · 370 阅读 · 0 评论 -
mpvue小程序开发(一):环境搭建
一:开发环境1:前端开发环境是少不了nodejs的,所以我们先判断是否有使用上图命令node -v进行判断,如果出现版本号,则证明已经安装了,如果没有,则需要去官网下载安装2:包管理工具,这个也少不了,因为开发环节中时不时会引入相关包包使用上图命令npm -v进行判断,如上图则进行了安装,如何安装则需要自行百度3:切换源由于可能包被墙或者太远了下载慢等缘故,可以考虑...原创 2019-06-16 00:01:07 · 481 阅读 · 0 评论 -
mpvue小程序开发(十三):数字相加
在小程序的开发中难免会遇到数值相加比如我们如下定义var a=3var abc=a+1得到的结果是31,额,这是字符拼接啊,明显不是我们想要的,那么该如何是好如果是html中,我们可以这样处理 var abc=parseInt(a)+parseInt(1)但是在小程序中有一个妙招,就是先减少后加如上 var abc = a-1+2 这样得到的结果就是4了,是我们想要的...原创 2019-08-31 21:32:46 · 568 阅读 · 0 评论