mpvue

微信小程序框架: Taro 做微信小程序的框架, 几个比较主流的: 官方的 WePY : https://tencent.github.io/wepy/document.html#/ 美团的 mpvue : http://mpvue.com/mpvue/#-html 京东的 Taro : https://taro.aotu.io/ 前两者都是Vue风格的, Taro是React的. 本篇本着学习的目的, 用Taro做一个简单的小程序. 代码在这里: https://github.com/mengdd/mini-program-todo 这是预览图: 背景: 一直做Android开发, 最近想把其他各种技术都撸一撸, 拓展一下视野. 之前练过微信小程序原生开发的例子, 基本上只知道个大概, 翻书马冬梅, 合书马什么梅? 所以这次用框架了, 觉得还是要有个输出, 这样印象深刻一些. 所以本文是从一个小白的角度, 手把手做练习的. Taro程序环境 这部分参考: 官方文档: https://nervjs.github.io/taro/docs/README.html Getting Started: https://nervjs.github.io/taro/docs/GETTING-STARTED.html 要有node环境, 推荐用nvm来管理. 需要安装CLI工具: npm

微信小程序框架: Taro 做微信小程序的框架, 几个比较主流的: 官方的 WePY : tencent.github.io/wepy/docume… 美团的 mpvue : mpvue.com/mpvue/#-htm… 京东的 Taro : taro.aotu.io/ 前两者都是Vue风格的, Taro是React的. 本篇本着学习的目的, 用Taro做一个简单的小程序. 代码在这里: github.com/mengdd/mini… 背景: 一直做Android开发, 最近想把其他各种技术都撸一撸, 拓展一下视野. 之前练过微信小程序原生开发的例子, 基本上只知道个大概, 翻书马冬梅, 合书马什么梅? 所以这次用框架了, 觉得还是要有个输出, 这样印象深刻一些. 所以本文是从一个小白的角度, 手把手做练习的. Taro程序环境 这部分参考: 官方文档: nervjs.github.io/taro/docs/R… Getting Started: nervjs.github.io/taro/docs/G… 要有node环境, 推荐用nvm来管理. 需要安装CLI工具: npm install -g @tarojs/cli 复制代码 创建项目并运行 创建项目 创建模板项目: taro init myApp 复制代码 在这个阶段会有一些问题要回答. * 请输入项目介绍！ My

前言 微信小程序因为其便捷的使用方式，以极快的速度传播开来吸引了大量的使用者。市场需求急剧增加的情况下，每家互联网企业都想一尝甜头，因此掌握小程序开发这一技术无疑是一名前端开发者不可或缺的技能。但小程序开发当中总有一些不便一直让开发者诟病不已，主要表现在： 初期缺乏方便的npm包管理机制（现阶段确实可以使用npm包，但是操作确实不便） 不能使用预编译语言处理样式 无法通过脚本命令切换不同的开发环境，需手动修改对应环境所需配置（常规项目至少具备开发与生产环境） 无法将规范检查工具结合到项目工程中（诸如EsLint、StyleLint的使用） 有了不少的问题之后，我开始思考如何将现代的工程化技术与小程序相结合。初期在社区中查阅资料时，许多前辈都基于gulp去做了不少实践，对于小程序这种多页应用来说gulp的流式工作方式似乎更加方便。在实际的实践过后，我不太满意应用gulp这一方案，所以我转向了对webpack的实践探索。我认为选择webpack作为工程化的支持，尽管它相对gulp更难实现，但在未来的发展中一定会有非凡的效果， 实践 我们先不考虑预编译、规范等等较为复杂的问题，我们的第一个目标是如何应用webpack将源代码文件夹下的文件输出到目标文件夹当中，接下来我们就一步步来创建这个工程项目： /* 创建项目 */ $ mkdir wxmp-base $ cd ./wxmp-base

❝ 最近帮别人在做一个小程序,因为官方的支持不够好,组件库也不够多,所以就没有使用官方的操作。网上查找了一番，觉得mpvue还不错（之前也没玩过），索性拿来用吧！ ❞ 01 前言 小程序的做法也是比较简单的，假如你是老手的话基本上开箱即用，但是奈何自己技术不够，那就手把手教你踩坑吧。 之前也做过几个小程序，我用过 官方的 、 uni-app 开发，效果还行。然后现在是想尝试一下 mpvue ，生态还可以，组件库也多。拿到设计图的时候觉得还可以，但是一看好像还是有点东西的。 02 自定义tabbar 我看到了页面是有一个自定义tabbar的，自己之前没有做做过这种，都是直接在app.json文件里面配置的，简单高效不带坑。虽然说官方支持 自定义tabbar 的功能，但是我和官方的意思就不是同一个频道的。这是我拿到的 原型图 ： 原型图 一开始好像是有点蒙，但是谷歌了一下其实还有救。思想就是把原生的tabbar隐藏，然后把你自定义的tabbar放上去即可。 在app.json配置tabbar，因为后面要跳转（不配置报错） 新建一个mytabbar.vue文件，写自己的tabbar 在app.vue的onShow的时候隐藏原生的tabbar, wx.hideTabBar(); 这样其实就好了，但是需要tabbar的页面都要引入自己的组件，talk is cheap

之前在网上看到博客园 新闻服务开放接口 ，因为自己本身有看博客园IT新闻的习惯，为了能随时随地简洁方便的浏览新闻，于是萌生了一个利用开放API开发一个微信小程序的想法。 1. mpvue初探 平时技术栈有用到Vue，这个小程序功能也比较简单，用 mpvue 再合适不过了。mpvue 基于 Vue.js 核心，修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，获得完整的 Vue.js 开发体验，组件化代码复用、Vuex 数据管理、webpack 构建机制、开发阶段 hotReload 等等。查看 官方文档 ，一步一步来构建项目，可以说相当快速。 2. 接口HTTPS化 微信小程序明确规定服务端必须用HTTPS，博客园提供的接口都是HTTP协议的，而且这个老的API返回的数据格式都是XML的，索性这里自己转一遍接口，配置个HTTPS证书。 2.1 koa2写个接口服务 部分代码如下： const http = require('http'); const url = require('url'); const host = 'http://wcf.open.cnblogs.com' class cnblogsCtrl { //分页获取最新新闻 static async recent (ctx, next) { let pageIndex

直接进入重点谈谈遇到的坑。 根据项目需求，一个页面，同时出现以下几种组件 1、input输入框 2、picker选择器 3、时间选择器 4、textarea 5、图片上传和预览 首先看vant-ui发现以上几个组件都可以使用，于是愉快的撸了起来。。。。 引入了所有需要用的组件，发现自己简直棒棒哒 { "usingComponents": { "van-button": "/static/vant/button/index", "van-cell": "/static/vant/cell/index", "van-cell-group": "/static/vant/cell-group/index", "van-popup": "/static/vant/popup/index", "van-datetime-picker": "/static/vant/datetime-picker/index", "van-field": "/static/vant/field/index", "van-picker": "/static/vant/picker/index", "van-toast": "/static/vant/toast/index" } } 由于发现的问题，已经被修复，这里只能针对问题做描述 1、vant-field 组件 写上去的时候，贼特么6，效果也不错。但是！！！

一、WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版，提供了跟微信界面风格一致的用户体验。 GitHub地址： https://github.com/Tencent/weui-wxss ； npm下载： npm i weui-wxss ; 二、iView WeApp iView是TalkingData发布的一款高质量的基于Vue.js组件库，而iView weapp则是它们的小程序版本。 GitHub地址： https://github.com/TalkingData/iview-weapp ； npm下载： npm i iview-weapp ； 三、ZanUI WeApp ZanUI WeApp是有赞移动 Web UI 规范 ZanUI 的小程序现实版本，结合了微信的视觉规范，为用户提供更加统一的使用感受。 现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、toptips 等组件或元素。 GitHub地址： https://github.com/youzan/zanui-weapp npm下载： npm i zanui-weapp 另外，zanui也使用 mpvue 重写 zanui-weapp，实现了其中所有组件。 GitHub地址：

mpvue,wepy跟不上节奏就不谈了。比较下原生，taro, uni-app 原生：效率低下，语法支持性差 ,框架就是用来节省时间的， taro：基于raect，本人react没有深入 后续有机会再实践 uni-app： 效率高，应用市场也丰富。 vue上手难度低，对于企业来讲更容易进行维护 。 vue流行主要是因为它可以简化开发者的代码、无需开发者手动做很多优化，就可以得到高性能的应用。 不比一般人原生写的性能差， 比如原生微信开发setdata，从逻辑层js传输数据到视图层，是有时间损耗的。而uni-app是自动diff差量更新数据。 来源： oschina 链接： https://my.oschina.net/u/560237/blog/3168839

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 一、概念 mpvue是 美团 修改了 Vue.js 的 runtime 和 compiler 使其可以运行在小程序环境中，从而引入了整套 Vue.js 开发体验的小程序框架。 二、优化细节 1、实例生命周期 不同于vue的是我们会在小程序 onReady 后，再去触发 vue mounted 生命周期 除了 Vue 本身的生命周期外（详细的 vue 生命周期文档请看 生命周期钩子 ），mpvue 还兼容了小程序生命周期，这部分生命周期钩子的来源于 微信小程序的 Page ， 除特殊情况外，不建议使用小程序的生命周期钩子。 2、模板语法 几乎全支持 官方文档：模板语法 ，但需要注意的是： （1）组件：由于要预编译出 wxml，只能使用单文件组件（.vue 组件）的形式进行支持，不支持：动态组件，异步组件，自定义 render，inline-template，X-Templates， <script type="text/x-template"> 字符串模版，Slot（scoped 暂时还没做支持）。 （2）不要在选项属性或回调上使用箭头函数，.eg： //箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的 created

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 本节将介绍如何使用WePY创建一个最简单的项目，也就是之前已经创建过的HelloWorld。 1.6.1 创建HelloWorld项目 首先需要在使用的代码编辑器中新建一个项目，之后使用CMD命令行工具或者是终端shell等使用“cd 文件目录”的命令进入到该项目目录下。 执行：wepy init standard HelloWorld，执行成功后会对该项目进行一些初始化配置，这里选择的配置如图1-27所示。 图1-27 创建WePY项目 这里配置的AppID和其他的内容并不能直接作用于微信小程序本身，而是会记录在WePY项目的project.config.json文件中。该工程项目配置的project.config.json内容如下所示。 { "description": "A WePY project", "setting": { "urlCheck": true, "es6": false, "postcss": false, "minified": false }, "compileType": "miniprogram", "appid": "touristappid", "projectname": "hello", "miniprogramRoot": "./dist" } 等待创建项目成功