• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

微信小程序开发实践

微信小程序推出已经很久了,之前也陆陆续续作了一些跟进研究,苦于没有企业方面的认证和https等支持,使用个人类型账号做了一些测试demo玩了一下,并没有深入的使用和了解微信提供的大部分接口和功能;

公司层面,一季度在新零售电商平台方面作了比较大的调整,换了一个更强力的第三方,支持比较全面,部门工作也相续转到对新平台的支持,比如积分活动推广等,也使得有机会使用公司的授权和资源来做更多的事情;

技术关键词:

使用的主要技术微信小程序Vue.js、Vuex、vue-router、Webpack、Element-UI、axios、Scss;

IDE:微信开发者工具、VScode;

版本管理:Gitlab;  开发方式:前后端分离协同开发;

按照我的描述习惯,将整个开发分为管理后台开发和前端微信小程序开发两部分,管理后台主要是用Vue.js和Element-UI,在之前的文章《JavaScript Puzzlers in VueX》中做过介绍了就不再累述了,比较简单,登录控制,路由控制(没加上动态路由),组件化等等,一撸而就(误解,当初以为小程序管理后台是小程序配套的,类似微信公众号配套,后来发现要我们一步步做出来,也是,数据存储格式和交互什么的,是要单独做的);

重点是微信小程序开发阶段,公司层面还没有正式的提出需求,所以先开始了一个比较简单的投票小程序(小伙伴们都有选择困难症,所以开发个自家的投票小程序),一个是磨合整个流程,另外就是快速体验和使用;按照比较传统的 需求–原型设计–评审–UI–前端开发–后端开发–接口测试–整体测试–交付的流程展开,流程基本都参与了,所以对这块也有了比较全面的认识

原型设计:

微信小程序开发实践

微信小程序开发实践

原型链接:原型链接

鄙人制作的基础原型图,审核时考虑时间和主要是内部人员用,把个人中心砍掉了,只剩下投票选项和查看结果,比较简洁了,基本不用UI大神参与,所以定下来前端就开动了,配置好json文件页面选项和app.js启动,一个页面来说,就是page.wxml(页面布局,wx元素)+page.wxss(等同css)+page.js(功能代码)+page.json(页面设置)了,很好理解,配合比较详实的api文档,和后端大神对接数据接口就行了

结构:

│  app.js    // 启动配置
│  app.json  // 页面配置
│  app.wxss  // 全局样式表
│  project.config.json    // 项目配置文件
│  README.md
│
├─images
│      logo.png
│
├─pages
│  ├─index     // 选项页
│  │      index.js
│  │      index.json
│  │      index.wxml
│  │      index.wxss
│  │
│  ├─logs     // 日志
│  │      logs.js
│  │      logs.json
│  │      logs.wxml
│  │      logs.wxss
│  │
│  └─result    // 结果页
│          result.js
│          result.json
│          result.wxml
│          result.wxss
│
└─utils    // 公用方法,过滤器
config.js  // baseUrl、API
util.js    // 公用方法

开发层面上来说,微信小程序的原理/文档/API都比较容易理解,调试模式允许非HTTPS,特别是如果做过React/Vue前后端分离开发的同学,会发现里面很多东西很接近,甚至可能比React/Vue等框架更容易上手,里面page.wxml page.wxss page.js甚至可以看成是page.vue的拆分,但路由和页面配置等更加简洁,并且配合微信小程序的与微信贴合的“组件”和方法属性,页面很容易就搭起来了;当然也不能揣测与其他框架是否有“借鉴”的成分,毕竟大家都是一个脑袋两条腿(逃~)。

微信小程序开发实践

另外一点不得不说,随着小程序生态的扩大,原有的接口功能或者政策的影响,小程序的更新还是频繁的,如上图,常用的getUserInfo,就由app.js启动/index.js初始化改为引导用户按钮,变更的API可能会影响到已经发布的功能,开发和制作后的小程序要随时盯着官网,及时调整小程序。

开发全景:

微信小程序开发实践

小程序二维码:

微信小程序开发实践

 

资料:小程序开发


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明微信小程序开发实践
喜欢 (2)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端Coder,中二非文艺闷骚少年,喜欢动漫、历史、暗荣三国志和游山玩水,关注互联网发展,期待遇到更多小伙伴一起吹水玩耍;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
(1)个小伙伴在吐槽
  1. 拜读了,多多学习总是好的!
    3566882018-05-29 10:46 回复 Windows 7 | 搜狗浏览器 2.X