前言

关于微信小程序的本质及其功能，此处不再详述。鉴于小程序的频繁曝光，相信您也是来获取一些实用信息。本文将带领大家一同探索微信小程序，从入门到可能产生的放弃感。

微信小程序开放功能

草民阅读过众多文档，微信的官方文档质量相当高，草民由衷地对腾讯的这一技能表示赞赏，大家不妨去阅读一番，下面将通过一张图表来全面展示小程序所开放的功能。

功能解读

微信小程序在界面设计上继承了weui的基础风格，并且得益于其与微信app的紧密关联，许多API得以通过桥接方式访问原生接口。这包括导航、地图、图片选择、IO操作、网络请求、登录以及支付等功能，都是通过桥接技术实现的。这种设计使得小程序相较于应用号等其他平台，具有显著的优势。

微信小程序跨平台动态化方案

微信小程序的源代码并未对外公开，因此，关于其采用的动态化机制，众说纷纭。在此，我简要介绍两种最新的动态化实现方式：，，。

**

采用传统htm+css+js的框架进行开发：

优点：

操作简便，效率高，预置的模板设计已经就绪，即便是经验丰富的H5开发者也能轻松应对。

随着颠覆性框架的问世，DOM（文档对象模型）的概念应运而生，而其强大的DOM diff操作使得UI的更新过程变得更加顺滑流畅。

缺点：

1.渲染速度与性能方面的表现依然与原声相差甚远

2.从内存方面的考虑，列表复用问题无法解决

* 与 Weex*

优点：

采用html或xml结合css与js的开发模式，不过将html和css通过层级转换成DOM，前端实现映射并渲染，因此在性能上无需过分忧虑。

在设备中集成了运行环境，因此能够对API进行拓展，实现诸如调用系统权限或增加额外功能等操作，比如选取图片功能。

缺点：

尽管沿袭了前端开发的传统方法，然而目前阶段的HTML或XML以及CSS在标准化方面尚显不足，这涵盖了SVG以及CSS绘制图标等多个方面。

2.需要了解部分的知识，对开发效率方面是一个降低

经过对上述两种方案的对比，我个人的偏好依然偏向后者；毕竟，性能的优劣仍然至关重要。最初，我猜测微信小程序可能选择了后者，因为在其开放的功能中，确实包含了众多独有且新颖的能力。

令人遗憾的是，微信小程序的结论却与大家预期不符，它采用的是第一种方案。许多人对此持怀疑态度，甚至质疑我强大的腾讯帝国为何会选择一个相对落后的策略。下面，请看一张图片：

知晓者皆明上图所示内容，然为便于向非程序员同行阐述，仍需对此功能作简要说明。在开发者功能模块中，存在一项显示布局边界的配置选项，此功能可呈现所有原生控件的布局边界。观察上图，底部及上方均为原生界面，而中间大部分区域则非原生，此现象亦佐证了先前的观点：微信小程序采用了某种特定的开发模式。

众多人恐怕要抱怨了，认为草民所谈无足轻重，我们只关心食物，只愿饱餐一顿，不论这肉来自哪头猪。有句话是，不愿成为厨子的裁缝算不上优秀的司机，想必大家也不愿总依赖他人之肩来编写代码。希望各位能领会到草民如此铺垫的用意。那么，废话不多说，现在我们就正式开始对小程序进行讲解。

开发准备

一、下载开发工具

二、添加项目

三、填写项目信息

若您使用的是小程序，请确保选择相应选项；若没有，则请选择“无”。完成填写后，记得点击“添加项目”按钮。

程序主体

app.js文件主要负责存放一系列公共的业务逻辑，同时负责监听小程序的生命周期相关操作。

在任意页面的文件中，您都可以通过执行特定函数来访问app.js模块。

App组件中，当组件挂载时执行特定操作，当组件显示时执行另一项操作，当组件隐藏时执行第三项操作，最后显示“I am data”信息。

操作：

1、App..()

() 函数用于获取当前页面的实例。

2、()

我们提供了全局的 () 函数，可以获取到小程序实例。

().log()显示：“我，是数据。”

注意：

App() 需要在 app.js 文件中进行注册，并且注册的数量应当限定为一个。在 App() 内部定义的函数中，请避免直接调用 ()，转而使用 this 关键字来访问 app 实例。此外，在页面尚未生成的情况下，请勿调用 ()。在成功获取 () 实例后，请勿擅自调用其生命周期函数。

2、在app.json文件中，需配置界面布局、公共窗口的展示效果、底部导航栏的样式以及超时处理的相关参数。

{ "":

"//", "/logs/"

"xt" 字段被设置为 "Demo"，"list" 字段则被具体列出。

首页入口严格受限，日志浏览通道亦被封锁。

禁止对特定内容进行修改，相关设置包括但不限于，不涉及任何虚假信息，确保内容的真实性，同时标记为有效验证。

3、 app.wxss : 配置公共样式

在 app.wxss 文件中定义的样式属于全局范畴，它对各个页面都产生作用。

字体设置为Neue，采用无衬线风格；布局采用弹性布局模式；弹性方向保持默认；边距设置为默认值；盒模型使用默认样式。

页面：

对于小程序，许多人存在一个误解，认为小程序就是用来……这种说法并不准确。实际上，小程序是微信重新定义的一种规范，它基于XML和JS开发，并不支持也不兼容HTML，同时在CSS写法上的兼容性也受到限制。

上图中小程序的page目录包含wxml、wxss和js三种后缀名文件。值得注意的是，微信对wxml的全称并非xml，而是采用了另一种称呼，同样，wxss也有其特定的名称。这些命名方式的变化，暗示了小程序开发将与传统前端开发模式有所不同。接下来，我将详细介绍这四部分的具体应用。

.json :

页面的布局设置仅限于调整与界面展示相关的选项，这些选项将决定当前页面的窗口外观，涵盖标题设定、背景色调、色彩搭配以及是否支持下拉功能等细节。

微信接口功能展示，旨在进行详细演示，以供参考。

为确保开发者能够简化设置过程，相关规范要求，在描述页面的环节，这四个关键文件需遵循一致的路径和名称。

简单事例：

一、 编写app.js

app对象中包含一个方法，该方法接受一个回调函数作为参数。如果该回调函数为空字符串，则直接执行该回调函数；否则，调用登录接口wx.，并在接口调用成功后，将返回结果赋值给that变量。如果回调函数为空字符串，则再次执行该回调函数。

二、配置app.json

增加个人中心界面

{ "":

"/mine/"

禁止对特定内容进行修改，相关标识为“#”，该内容涉及“滴答宝”，其余部分信息未提供。

三、编写个人中心界面

目录结构如下：

1、.wxml

客服联系方式包括电话服务，其服务时间为每日10点至22点，同时官方邮箱也是您获取帮助的途径之一。

2、.wxss

对样式进行定义，其中包含如下属性：边框样式设置为无，布局方式设为flex，子元素布局方向设为水平，主轴对齐方式设为起始端，侧轴对齐方式设为默认，子元素宽度设为0，子元素间距设为默认，边框颜色设为指定颜色。另外，背景颜色设为特定颜色，子元素布局方式设为flex，子元素间距设为15像素，定义了一个自定义属性，设置了微软布局的属性，边框颜色设为默认，边框宽度设为1像素，边框样式设为实线。容器宽度设为100%，底部边距设为20像素，顶部边距设为负2像素。字体大小设为默认，字体颜色设为指定颜色，左对齐方式设为默认。字体大小设为默认，字体颜色设为指定颜色，上下边距设为默认。在iv类中，设置了上下边距为默认，顶部边距设为2rpx，底部边距设为2rpx，左右边距设为默认，边框样式设为默认，边框颜色设为默认，边框宽度设为默认，边框样式设为默认。容器布局方式设为flex，子元素布局方向设为默认。字体大小设为默认，字体颜色设为指定颜色，顶部边距设为默认。

3、.js

定义app为一个页面类，其构造函数接收一个对象作为参数，该对象包含以下属性：一个空对象、一个布尔值、一个空字符串。

“我的账户”功能已启用，邀请好友共襄盛举，赚取收益，“我的业绩”一目了然，用户协议详情请查阅，当前版本为V 1.0.0（内测版）。

}, : () => {通过调用应用实例的方法来获取全局数据，执行app.()操作，进而更新数据；that.()进行数据更新。}, : () => {执行this.()操作，并设置参数为{: true}。}, (e) => {在事件触发时，执行this.()更新数据，并附加参数{: ,: "点击头部"}。}, (e) => {在事件触发时，获取事件对象e，并通过.log输出"事件类型 = " + e.type，随后执行this.()更新数据，并附加参数{: ,: "点击" + e.type}。},})

代码结构相当简洁，目的仅在于向您展示基础的功能展示，若您希望进行更深入的应用，请查阅官方手册，相信您在数小时内便能熟练掌握，关于简单的集成演示，就介绍到这里啦~

技术缺陷

人们不禁会提出质疑，微信小程序真的如此出色吗？它真的没有任何问题或缺陷吗？

当然存在，我在这略述一下个人对程序框架的看法，代码领域的框架其实不外乎两类，一类是时常遭受诟病的，另一类则是鲜有人问津的。我们应当以欣赏美的视角去审视框架，同时，也应保持审视的态度，通过发现问题、提出问题、解决问题的方法来对框架进行改进。

以下我要分享一些在微信小程序开发过程中感到不愉快的几点，其他的问题大多都能找到解决办法，而我只是提出几个关于代码层级的困扰，这恰恰是我最为关注的方面：

1、操作反馈组件

小程序配备了四种不同的操作反馈模块，这些设计颇具创意，并且广泛存在于多数开发框架中。然而，我心中存有疑惑，为何不能将这些组件封装起来，以便于我们更便捷地使用呢？

看下官方使用方式：

我希望的方式是这样的：

var = ('@wx-').({属性1：'消息内容',属性2：1000})

不知道大家的想法是怎样的，反正草民是非常遵循傻瓜式编程的~

2、 模板封装

向大家说明，小程序的模板仅能引入wxml，无法支持具体的业务逻辑及css样式，这对我而言是个难以接受的现实。我打算封装一个组件，该组件不含业务逻辑，我暂且称其为“无逻辑组件”。这难道就是组件化开发的定义吗？期待腾讯在下一版本更新时能解决这一问题。

3、不支持配置别名，只能采用相对路径的方式进行

看一下的方式：

变量赋值为字符串'../..//.js'。

百姓斗胆请教，您觉得这样的设计是否令人愉悦，与那一个相比又如何呢？

变量赋值为字符串'root//.js'。

4、适配方案 rpx（ ）

微信小程序设定了一种新的尺寸度量标准，适用于各种屏幕分辨率。该标准明确指出，在特定条件下，屏幕宽度与物理像素的对应关系为，例如在某个平台上，若屏幕宽度为750物理像素，那么其对应的rpx值为750，即1rpx等于0.5px，也等于1个物理像素。

在项目实施过程中，我普遍运用rpx单位进行屏幕适配，然而，偶尔会遇到1rpx无法正常显示的情况。此外，当我调整设置后，手机屏幕上显示的内容并未填满整个屏幕，这表明模板的适配并未完全成功，或是适配策略存在缺陷。因此，我恳请开发者在使用过程中予以关注。

运营问题：

给大家带来一个小惊喜，在此提醒各位在运营小程序过程中可能遇到的问题，希望各位在操作过程中能注意以下几点，以避免犯下一些不必要的错误，从而确保运营效果和项目进度的顺利进行。

提交「小程序」时需要注意哪些地方，才不会被拒？

小程序的名字应当与提供的服务内容紧密对应，且需由两个或更多词汇构成，避免采用如“日历”、“电话”等普遍性不强、难以辨识的词汇进行命名。

在提交小程序进行审核的过程中，务必确保所选的头像LOGO图片具有较高的清晰度，这样的清晰度意味着图片中的各个元素都应清晰可辨、易于区分，若图片不够清晰，微信平台将不会予以批准。

微信期望用户在打开小程序后能立即启动所需功能，故在文档中指出，用户在页面中即可直接使用相关服务，不应有所隐藏，亦不应进行多次跳转。特别规定要求，「小程序的主页需确保用户能直接访问或通过最多两次点击即可抵达目标功能」。

小程序的功能不宜过于单一，不能仅包含一个页面，亦或仅设置一个按钮。

小程序不具备展示或推荐其他第三方小程序的功能，无法执行小程序导航、相互推广以及小程序排名榜等操作。同时，也不支持通过小程序进行搜索其他小程序的行为。

6、用户使用小程序时，不能以关注或使用其它小程序作为条件。

7、禁止诱导分享，这个不用再说，微信对此一直严厉打压。

小程序不得用于商业推广或广告宣传，不得包含占卜、星座预测等测试性质的内容，亦不得涉及赌博、竞猜、抽奖等元素。

9、小程序里面的图片，不能包含广告、网址。

运营「小程序」的时候，需要注意哪些地方，才不会下架？

1、微信不允许批量注册、重复提交大量类似的小程序。

2、小程序的添加，不能设置付费，必须是免费添加。

若你的微信小程序配备了支付功能，务必在简介部分予以清晰标注。

若你打算借助小程序开启创业之路，务必留意：即便小程序所在的企业遭遇收购或合并，你依然可以在微信及微信小程序平台上继续运用该小程序。

若小程序涉及使用地理位置定位服务，那么在收集或获取用户的具体位置信息时，务必确保已经征得用户的明确许可。

小程序的后台服务仅应用于特定用途，包括但不限于：提供VoIP服务、音频播放功能、地理位置信息获取、任务执行以及本地提醒。

7、禁止多媒体比如音频、视频的自动播放。

结语

经过一番努力，耗时近半天，小程序的分享工作终于告一段落，衷心希望它能为大家提供便利，在此表示感谢（-_-）。