wepy

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

【今日推荐】：为什么一到面试就懵逼！>>> 技术的价值在于解决问题——为业务赋能，为团队提效，为自己开心，为家人提供保障富足的生活。 堂主说：从场景出发找方案，事半功倍。 堂主还说：身价取决于解决问题的能力。 下边，我们带着问题出发从前辈们分享中找答案。 背景 大概去年这个时候，leader找到我，希望我能抽出一部分精力负责基建或者带人，我当时的回复是我两方面都有兴趣，带人方面由他来安排就好，基建方面给出的回复是以下这些我当时想到的 考虑到自动化测试相关会有一定的推广难度，应该需要依赖组织的能力来执行，跟leader沟通，这个事情由他来推动，正好他也计划要做。 时隔一年，目前的成果是： 带人方面：合理分工，带领新人熟悉业务，熟悉新技术，同时保障业务正常上线。 基建方面： 1.抽离自己业务线中的通用模块和组件； 2.模板库: wepy1.0模板、Taro模板、h5模板、CMS系统模板； 3.cli: 基于模板创建项目，初始化项目并自动创建、关联远程仓库。 复制代码 虽然做了一些事情，但是我觉得并没有产生多少价值，对团队的帮助也很小，应该没有实现leader的预期，同时过去一年自身的成长也不够，所以我很焦虑，我想除了自身负责的业务线之外，做一些不一样的事情，解决团队和业务的问题，也提高自己的身价。 今天，早早聊各位前辈，关于前端搞规划的分享，解放了我的思想，给我指明了道路，谢谢前辈！！

做过前端，或对小程序有些了解的同学都知道，小程序是没有域名访问概念的，访问的路径都是以：“/pages/index”、“/pages/my”这种方式进行页面跳转的。域的概念从何而来？ 事情是这样的，前段时间突然冒出个想法，大家上下班，有些人离公司比较远，回家路上/地铁上，可能都会比较无聊，看看新闻、听听音乐啥的。 但是对于IT行业的程序员们来说，入了IT领域就意味着，永远有学不完的东西，经常就有看到一些人在地铁拿着一本书在看，于是我灵机一动，想着做了个小程序，收集一些电子书，方便大家随时随地的阅读，既不耽误学习，回家的路上也不无聊，而且小程序集成在微信里，不会给大家带来负担。 说干就干，经过几个周末的开发和测试，慢慢的小程序成型了，也发布上线了，是基于wepy框架开发的，坑点之前的文章已经说过了，就不再提了。主要讲讲后面发生的一些事。 作为技术交流，平时也加了一些群，都有一些不错的书，工作几年自己也弄了些存货，这次是全部家当都拿出来了、还找了几个 测试 、 java 的后端大佬，都收集了些他们的珍藏品,因为没有自己的服务器，刚开始是把内容存放在阿里云上的，但没两天告诉我欠费了……， 想哭，就这么工资，怎么经的起折腾啊，后来了解了一下腾讯云，每月有些免费的流量，果然放弃了阿里云，把东西转移到了腾讯云。嗯，就这样很开心的把小程序上线了，每天有事没有看看书，觉得还是蛮方便

一、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地址：

微信小程序开发-开发流程和开发基础 - 1 微信小程序开发-2- 生命周期、事件、原生组件 微信小程序开发- 3 - 原生组件(一) 微信小程序开发- 4 - 原生API 微信小程序开发- 5 - 开放功能 登录授权 登录流程 小程序wx.login() 获取code code为当前用户的临时登录凭证，有时效，5min wx.request()发送请求向开发者服务器，携带code 开发者服务器向微信服务器发送请求，通过微信凭证校验接口 换取ssession_key和openid ssession_key是用户当前会话的秘钥；这个秘钥是对用于数据进行加密签名的秘钥 openid 是用户在小程序里面的唯一标识 开发者服务器将ssession_key和openid组合生成登录态标识 开发者服务器将ssession_key和openid和登录态标识存入到数据库 开发者服务器向小程序端返回登录态标识 小程序将登录态存入storage wx.request()发起业务请求携带登录态标识； 开发者服务器通过登录态标识查询到用户的ssession_key和openid 通过openid对用户的数据进行存取操作，同时将结果返回小程序端 code和session_key是一一对应关系 同一个code只能换取一个session_key session_key 有实效性 比code时间长 用户使用频率越高

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

初始化项目 运行 wepy init standard heima_ugo 命令，初始化小程序项目 运行 cd heima_ugo 进入项目根目录 运行 npm install 安装所有依赖项 运行 wepy build --watch 命令，开启 wepy 项目的实时编译功能 打开微信开发者工具，加载 wepy 项目并查看效果 解决 ESLint 语法报错问题 梳理项目结构 清理并重置 src -> pages -> index.wpy 首页 在根目录的 .prettierrc 配置文件内，新增 “semi”: false 配置，防止每次格式化代码，添加分号的问题 清理并重置 src -> app.wpy 中的代码，将 style 和 script 标签中，不必要的代码删除掉 清空 src -> components 和 src -> mixins 目录 将梳理完毕后的项目，上传至码云 绘制 tabBar 新建 src -> pages -> tabs 文件夹，用来存放所有 tabBar 相关的页面 删除 src -> pages -> index.wpy 页面，并在 tabs 目录中，新建 home.wpy，cates.wpy，search.wpy，cart.wpy，me.wpy 五个 tabBar 相关的页面 将页面路径，记录到 src -> app.wpy 文件的

1. 什么是 WePY WePY 是 腾讯官方出品 的一个 小程序快速开发框架 ，对原生小程序的开发模式进行了再次封装，更贴近于MVVM 架构模式，并支持 ES6 / 7 的一些新特性，同时语法风格更接近于Vue.js ，使用 WePY 框架能够提高小程序的开发效率 2. WePY的优点 WePY 相比于原生小程序开发，拥有众多的 开发特性 和 优化方案 ，例如： 开发风格更接近于 Vue.js ,支持更多vue中的语法特性 通过 polyfill 让小程序完美支持 Promise 在原生的小程序里面对Promise支持的并不是特别友好 可以使用ES6 等诸多高级语法特性，简介代码，提高开发效率 对小程序本身的性能做出了进一步的优化 支持第三方的 npm 资源 支持多种插件处理和编译器 etc... 3. 安装 WePY 框架 WePY 的安装或更新都通过 npm 进行，全局安装或更新 WePY 命令行工具，可以在终端运行以下命令： npm install wepy-cli -g 来源： CSDN 作者： 小鱼儿同学啦 链接： https://blog.csdn.net/weixin_41829477/article/details/104298770

运行wepy build --watch时报错如下: 解决 : npm install @wepy / cli@next - g 运行以上代码: 此时项目就可以正常启动 来源： CSDN 作者： 张晓宁 链接： https://blog.csdn.net/weixin_43794749/article/details/104115699

2、代码高亮WebStorm/PhpStorm（其他工具参见： wepy官网代码高亮 ） （1）打开 Settings ，搜索 Plugins ，搜索 Vue.js 插件并安装。 （2） 打开 Settings ，搜索 File Types ，找到 Vue.js Template ，在 Registered Patterns 添加 *.wpy ，即可高亮。 3、代码优化 （1）代码规范 wepy标签和原生一样 自定义组件命名应避开：原生组件名（ input、button、view、repeat 等）、WePY的辅助标签 <repeat> 变量/方法名尽量使用驼峰式命名，避免使用 $ 开头（ $ 开头的标识符是WePY内建属性/方法，可在js中以 this. 的方式直接使用，具体请 参考API文档 ） app、pages、components文件名的后缀为 .wpy ，外链的文件可以是其它后缀。 具体请参考 wpy文件说明 。 支持ES6/7的一些新特性，框架在ES6(ECMAScript 6)下开发（默认使用babel编译），因此也需要使用ES6开发小程序，ES6中有大量的语法糖可以让我们的代码更加简洁高效。 wepy继承了wx对象的方法，建议在wepy框架开发中不要用到wx对象的方法，虽然运行时效果是一样，但是打包时会cli报错（wepy中没有wx对象