微信小程序t填坑之旅一（接入）

一、小程序简介

小程序是什么？

首先“程序”这两个字我们不陌生。看看你手机上的各个软件，那就是程序。平时的程序是直接跑在我们原生的操作系统上面的。小程序是间接跑在原生系统上的。因为它嵌入在微信中，受微信管理。用一个不十分恰当的比喻就是，微信是“操作系统”（推出小程序后它确实具备了某些操作系统的特点），小程序是跑在这个“操作系统”上面的“程序”。

小程序有什么特点？

八个字，“触手可及”和“用完即走”。微信就是入口，搜索一下或者扫一扫即可打开微信小程序。无需下载和安装。这里就有个场景挺好，例如某天美女有约

体验比网站好，比下载APP更便捷。

这是张小龙给它的定位。目前安卓版本和IOS版本下面体验小程序是有挺大差别的。例如安卓可以将小程序添加到桌面如下图：

桌面查看

怎样找到你要的小程序。发布那天已经铺天盖地的科普了。我在这里再啰嗦两句。重要前提，微信更新到最新版本。如果你是第一次使用是看不到小程序入口的。需要使用一次之后才能发现入口。通过搜索小程序，在你平时添加公众号的搜索位置。搜索结果如果小程序会有标明，或者别人分享给你某个小程序，点开就算使用。

点进去使用一次之后你就可以发现有入口了（最下面）

二、注册小程序

其实注册我也并不想多讲，这里就简单带过。

注册地址：小程序注册

邮箱注意要使用

未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱

注意个人身份无法注册。其他的我就不啰嗦了，大家可以看一下微信官方提供的指南

小程序注册详见小程序注册流程

三、开发者

下载开发工具：微信开发者工具

添加开发者：注意：管理员本身就具有开发者的权限，所以如果你是管理员就不用去将自己绑定为开发者了，也绑定不了。

同样需要管理授权

最后搜索添加，最多 20 个开发者

打开工具后将看到下面的界面

填写相关参数登录微信小程序后到“设置”面板下获取我们要的参数

如果你的APPSecret没有设置过请先设置,设置过需要查看的点击"重置"按钮,并通过管理员授权可查看

配置完各个参数后终于可以打开开发者页面了,如下

补充：顺便说下体验者绑定，流程与开发者绑定一样

四、小程序预览

如果开发过程或者最后调试阶段我们需要在真机上运行小程序，可以使用预览功能。注意预览并不等于发布。未发布的小程序也只有开发者，体验者和管理员能够预览。并且预览二维码有时间限制。也就是说会失效

总体流程如下：

微信开发工具=>项目 =>预览=>出现二维码=>扫码体验

五、人性化

开发者的福音，手机上的调试模式。废话不多说，我们直接看一下

html,div,span,applet,object,iframe,h2,h3,h4,h5,h6,p,blockquote,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0 }
body>*:first-child { margin-top: 0 !important }
body>*:last-child { margin-bottom: 0 !important }
p,blockquote,ul,ol,dl { margin: 15px 0 }
h2,h3,h4,h5,h6 { margin: 20px 0 10px; padding: 0; font-weight: bold }
h2 tt,h2 code,h3 tt,h3 code,h4 tt,h4 code,h5 tt,h5 code,h6 tt,h6 code { font-size: inherit }
h2 { font-size: 24px; border-bottom: 1px solid #ccc; color: #000 }
h3 { font-size: 18px }
h4 { font-size: 16px }
h5 { font-size: 14px }
h6 { color: #777; font-size: 14px }
a:first-child h2,a:first-child h3,a:first-child h4,a:first-child h5,a:first-child h6 { margin-top: 0; padding-top: 0 }
h2+p,h3+p,h4+p,h5+p,h6+p { margin-top: 10px }
a { color: #4183C4; text-decoration: none }
a:hover { text-decoration: underline }
ul,ol { padding-left: 30px }
ul li > :first-child, ol li > :first-child, ul li ul:first-of-type, ol li ol:first-of-type, ul li ol:first-of-type, ol li ul:first-of-type { margin-top: 0px }
ul ul,ul ol,ol ol,ol ul { margin-bottom: 0 }
dl { padding: 0 }
dl dt { font-size: 14px; font-weight: bold; font-style: italic; padding: 0; margin: 15px 0 5px }
dl dt:first-child { padding: 0 }
dl dt>:first-child { margin-top: 0px }
dl dt>:last-child { margin-bottom: 0px }
dl dd { margin: 0 0 15px; padding: 0 15px }
dl dd>:first-child { margin-top: 0px }
dl dd>:last-child { margin-bottom: 0px }
kbd { background-color: #DDDDDD; background-image: linear-gradient(#F1F1F1, #DDDDDD); background-repeat: repeat-x; border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD; border-style: solid; border-width: 1px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 10px; padding: 1px 4px }
blockquote { border-left: 4px solid #DDD; padding: 0 15px; color: #777 }
blockquote>:first-child { margin-top: 0px }
blockquote>:last-child { margin-bottom: 0px }
hr { clear: both; margin: 15px 0; height: 0px; overflow: hidden; border: none; background: transparent; border-bottom: 4px solid #ddd; padding: 0 }
img { max-width: 100% }
.cj-img-container { text-align: center }
;
.cj-img-container img { max-width: 700px }
#cnblogs_post_body img { max-width: 700px }