微信小程序全面实战,架构设计 && 躲坑攻略

最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图:

Paste_Image.png

本文将结合具体的实战经验,主要介绍微信小程序的基础知识、开发中遇到的难点、项目的架构设计、最佳实践以及踩过的坑。文章内容较多,如果想看架构设计和躲坑技巧,请直接浏览后面的正文,简书没有目录,也挺伤感的。
继续阅读“微信小程序全面实战,架构设计 && 躲坑攻略”

​微信小程序图表插件wx-charts参数及使用教程

微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个,微信小程序图表插件wx-charts参数及使用教程。

wx-charts

支持图表类型

  • 饼图 pie
  • 线图 line
  • 柱状图 column
  • 区域图 area

高清显示

设置canvas的尺寸为2倍大小,然后缩小到50%,建议都进行这样的设置,图表本身绘制时是按照高清显示配置的,不然整体效果会偏大
继续阅读“​微信小程序图表插件wx-charts参数及使用教程”

微信推小程序意图并非取代APP,还有其他原因?

在微信公众平台小范围发出“小程序”的内测邀请函后,“APP将被小程序取代”的说法便甚嚣尘上,但腾讯方面对此回应称,“微信推出小程序,并非想要做应用分发市场。”

9月22日凌晨,微信公众平台小范围发出了“小程序”内测邀请函。什么是小程序?微信的官方解读是,小程序是一种不需要下载安装即可使用的应用,用户扫一扫或者搜一下即可打开。

微信小程序的问世其实有迹可循。“微信小程序”最初的名字叫“微信应用号”。今年1月份,微信事业部总裁张小龙曾在微信公开课上透露,微信正在研究增设“应用号”,即在目前的订阅号和服务号之外,用于应用推广。
继续阅读“微信推小程序意图并非取代APP,还有其他原因?”

微信“小程序”有怎样的未来?

微信的生态能够做多大,本质是取决于其与外界生态联接有多密切;就目前来看,微信“小程序”是一次试探性尝试,一切仍旧等待时间验证。

微信创新再下一城。9月下旬,微信“小程序”开始内测的消息开始刷屏朋友圈,一些资深用户已经获得邀请使用。“小程序”是什么?其实也就是所谓微信应用号。年初张小龙曾解释,作为一种新的公众号形态,应用号意味着用户关注它就像安装了一个App一样。

继续阅读“微信“小程序”有怎样的未来?”

微信小程序审核规则说明:技术与内容的规范

1月14日消息,微信小程序审核规则说明:技术与内容的规范,在提交小程序审核时,除了文章所提到的一些常见的拒绝情形之外,还应该注意以下几点:

微信小程序审核规则说明:技术与内容的规范

可用性和完整性:

3.3.1 提交的小程序须是一个完成品,要求可以打开,可以运行,且不可以是一个测试版。示例:不可运行、存在崩溃、闪退、按钮没有响应、文字表述不完整等。

3.3.2 本身会崩溃,或小程序程序会造成微信客户端崩溃的,将会被拒绝。
继续阅读“微信小程序审核规则说明:技术与内容的规范”

微信小程序开发的技术原理

微信小程序使用了前端技术栈 JavaScript/WXML/WXSS。但和常规的前端开发又有一些区别:

  • JavaScript: 微信小程序的 JavaScript 运行环境即不是 Browser 也不是 Node.js。它运行在微信 App 的上下文中,不能操作 Browser context 下的 DOM,也不能通过 Node.js 相关接口访问操作系统 API。所以,严格意义来讲,微信小程序并不是 Html5,虽然开发过程和用到的技术栈和 Html5 是相通的。
  • WXML: 作为微信小程序的展示层,并不是使用 Html,而是自己发明的基于 XML 语法的描述。
  • WXSS: 用来修饰展示层的样式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。” “我们的 WXSS 具有 CSS 大部分特性…我们对 CSS 进行了扩充以及修改。”基于 CSS2 还是 CSS3?大部分是哪些部分?是否支持 CSS3 里的动画?不得而知。

继续阅读“微信小程序开发的技术原理”

微信小程序设计指南

概要

基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同需求,实现用户与小程序服务方的共赢。

友好礼貌

为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示程序提供的服务,友好地引导用户进行操作。 继续阅读“微信小程序设计指南”

微信小程序 开发指南详解

创建小程序实例

点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。

下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。

​ app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考 API 文档
继续阅读“微信小程序 开发指南详解”