• 近十年新媒体代运营实战经验,2000家品牌企业代运营案例!专业、专注、专心!共创、共担、共享!全国服务热线:4008075790~

微信小程序技术初体验

日期:2017-03-09 作者:茂鸿

微信小程序说到引爆2017的前端话题,“微信小程序”当之无愧。微信小程序有着可以不需要下载安装、可以快捷传播和获取、出色使用体验的特点,被腾讯寄于连接用户与服务,实现应用“触手可及”的梦想的希望。

      从技术的角度看,其本质是一款基于微信的web离线包,微信开放平台提供了各式各样的动画和API,使得小程序的界面和过渡动画也更加美观、原生。用户在小程序里即用即走,不用考虑内存,硬件容量等问题,适合广大低频APP。上海茂鸿网络带大家走进小程序。

代运营3.6-2.jpg

第一、小程序的技术栈

       我们已经了解了小程序的产品定位,再看看小程序技术层面的问题。为了开发小程序,小程序对广大开发者提供了WXML,WXSS和高度封装的WXAPI。WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。WXAPI是微信原生 API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。同时,框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。

什么是基础组件?组件是视图层的基本组成单元。组件自带一些功能与微信风格的样式。一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。

       比如说微信提供了视图容器,可滚动视图区域,滑块视图容器,将原本开发者熟悉的HTML标签做了封装,直接用标签可以实现以前需要引入插件才能实现的滚动或滑块功能。这类高度封装的标签还有滚动选择器,可以用一个标签实现普通选择器,时间选择器,日期选择器。可谓是十分的方便快捷。

       在JS封装方面,由于框架并非运行在浏览器中,所以 JavaScript 在 web 中一些能力都无法使用,如 document,window 等。微信的技术架构让我们不再需要直接调用这些习以为常的浏览器对象,用他们的一套技术方案就可以方便快捷的实现原本复杂的逻辑。他们将所有的浏览器对象隐藏,只对开发者提供一个名为wx的对象,提供了全面的诸如网络、媒体播放、文件上传、数据缓存、位置、设备信息、界面交互、登录、支付、模版消息等能力。没有了cookie的使用,本地缓存相关只能用wx.setStorage(wx.setStorageSync)等api可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。且 localStorage 是永久存储的。

第二、微信小程序的开发设置

       对于小程序开发者,首先要做的是拿到管理员帐号,添加开发者白名单。然后在开发设置页面查看AppID和AppSecret,配置服务器域名。第三步下载开发者工具进行代码的开发和上传。微信小程序开发工具,严格规范开发者,每一步都需要扫码验证。同时小程序只支持https请求。


上海茂鸿文化传播有限公司版权所有 沪ICP备15047936号-2  如有图片侵权请及时联系本站,及时删错或更改