微信小程序开发初篇

自从微信说要新出一款新账号时,我就一直关注,最开始时还说是叫应用号,不过到推出时才官方定义出叫小程序。

1.png

一 什么是小程序?

小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

1.产品理念:

用完即走

2.特性:

无须安装、触手可及、用完即走、无须卸载

3.定位:

体验比网站好,比下载APP更快捷

二 如何上手开发?

我们明白了微信小程序的产品理念、特性和定位,相信会为我们确定到底什么产品是更适合做小程序的,如果是为了继续积累客户、推广产品而做小程序,那么绝对是不符合小程序理念的。小程序开发的目的就是为了高效的去提高用户体验。

1.开放注册范围

需要知道,个人账户的公众号是无法进行注册开发的。目前就支持政府、企业、媒体、其他组织。

2.开发准备

具体的看官网,官网说的很清楚。下载开发工具和查看开发文档

3.开发

相信看完开发文档后,基本的入门开发一款小程序也不成问题了。不过有几点需要提一下:

1)微信小程序框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。(MVVM模式的设计,和Vue的设计模式一样),所以这也就意味着我们得去掌握微信的这款框架和理解MVVM模式,进而去开发小程序。

2)当然框架也为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发,而且这些组件自带一些功能与微信风格的样式。直接调用这些组件开发,快速了很多。

视图容器、基础内容、表单组件、导航、媒体组件、地图、画布、客服会话

github上直接有微信团队为小程序设计的WeUI,可以直接下载导入项目进行使用。

3)获取用户输入的组件,需要使用组件的属性bindchange将用户的输入内容同步到 AppService。

<input id="myInput" bindchange="bindChange" />
<checkbox id="myCheckbox" bindchange="bindChange" />
var inputContent = {}

Page({
  data: {
    inputContent: {}
  },
  bindChange: function(e) {
    inputContent[e.currentTarget.id] = e.detail.value
  }
})

4)微信小程序内的所有url请求都是https协议,所以如果有需要和服务器端进行响应时,服务器端需要配置加密认证,添加https的认证证书。

5)微信小程序为了提升体验流畅度,编译后的代码包大小需小于 1MB ,大于 1MB 的代码包将上传失败。

6)本地资源无法通过 css 获取。background-image:可以使用网络图片,或者 base64,或者使用<image/>标签

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 28,841评论 9 295
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,915评论 25 709
  • 听着佛号,静静的夜,瑜伽刚结束,是时候给我的好种子浇水施肥,此时此刻我正在做我即将做的事,因为我想达成我的个人目标...
    李鲜花阅读 342评论 0 5
  • ‘’小气鬼‘’(微小说) 徐 宏 皮鞋大甩卖,五十元一双。 中年男人:四十元卖不卖。 ...
    sunxuhong阅读 442评论 0 2
  • 如果生命终将会安排一场流亡 你会选择去到哪里 以怎样的姿势出发 亦或以怎样的结局面他 那一场由一缕青烟升腾而成的漫...
    亦南9777阅读 446评论 0 0