微信小程序入门

1、运行环境

小程序接入流程：注册 — 小程序信息完善 — 开发小程序 — 提交审核和发布

咱们知道，微信小程序运行在三端：iOS、Android 和 用于调试的开发者工具。本文将介绍微信小程序怎样运行在开发者工具

（1）申请小程序帐号
点击 https://mp.weixin.qq.com/wxop... 根据指引填写信息和提交相应的资料，就能够拥有本身的小程序账号，这个帐号叫 AppID
申请到小程序帐号以后，咱们能够在小程序管理平台进行其余有关的设置，包括：管理你的小程序权限、查看数据报表、发布小程序等

（2）下载 “微信开发者工具”

下载地址：https://developers.weixin.qq....

（3）初始化小程序项目

说明：

项目目录选择一个空文件夹，项目名称本身取，AppID就是你刚申请的小程序帐号

点击“肯定”，能够看到以下界面，此时你的小程序项目初始化完成：

开发工具界面介绍

一、模拟器：微信小程序界面效果在此展现，开发者能够选择不一样的设备

二、编辑器：在这个地方能够看到整个项目的文档目录结构

三、调试器，包含7大功能模块：Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace

    八、 Storage，使用  wx.setStorage  或者  wx.setStorageSync  对数据进行存储。这里注意，不须要该数据时应及时销毁
    九、  AppData,  显示当前项目运行时小程序 的具体数据，实时地反映项目数据状况，能够在此处编辑数据，并及时地反馈到界面上
   十、 Wxml，至关于浏览器控制台的 “Elements”，在这里开发人员能够方便的查看 dom 结构，或者能够进行 CSS  样式的调整
四、一般使用小程序模式

五、编译模式。小程序项目启动的时候，一般选择 “普通编译”。在这里咱们还能够 “添加编译模式”， 添加目标页面进行编译，这样咱们每次编译后就能够直接看到想要查看的页面。
 在这里能够点击“预览”， 弹出一个二维码，使用手机进行扫描就能够在手机端进行查看

六、先后台切换。默认是前台，这样在模拟器咱们看到的是页面展现效果；当选择切换到后台的时候，此时用户能够在模拟器进行选择，帮助开发者模拟一些客户端的环境操做

七、清缓存

十一、Sensor（翻译为：感应）。开发者能够在这里选择模拟地理位置，或者调试重力感应 API

十二、显示该小程序的AppID，项目地址等。一个小程序只有一个AppID，这个AppID至关于该小程序的身份标识

1三、项目设置

     基础调试库：能够在此选择不懂版本的开发工具

     ES6 转 ES5：勾选后，会默认使用 babel 将开发者 ES6 语法代码转换为三端都能很好支持的 ES5 的代码，帮助开发者解决环境不一样所带来的开发问题，注意这里默认开启 javascript 严格模式

    上传代码时样式自动补全。这里须要开发者在 iOS 和 Android 上分别检查小程序的真实表现

1四、域名信息。在此将显示小程序的安全域名信息

1五、腾讯云状态。在此显示腾讯云状态、开发环境信息、域名信息

2、目录结构

初始化项目的目录结构以下图：

四种不一样类型的文件：json、wxml、wxss、js

（1）json 文件
小程序配置 app.json
全局配置，配置项目包括全部页面的路径、界面表现、网络超时时间、底部 tab 等
https://wiki.mobike.com/downl...

• 页面配置 page.json

局部配置。配置方法和上面的 app.json 配置方法相同

• 工具配置 project.config.json

一般你们在使用一个工具的时候，都会针对各自喜爱作一些个性化配置，例如界面颜色、编译配置等等，当你换了另一台电脑从新安装工具的时候，你还要从新配置。

考虑到这点，小程序开发者工具在每一个项目的根目录都会生成一个 project.config.json，你在工具上作的任何配置都会写入到这个文件，当你从新安装工具或者换电脑工做时，

你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项

（2）wxml 文件

• WXML 充当的就是相似 HTML 的角色，由标签、属性等等构成
• 可是， 和 HTML 有不少不一样的地方，下面咱们来一一阐述：
  标签名字有些不同，在小程序里咱们管这些标签叫 “组件”。小程序将经常使用的标签 div、p、span 包装成一个组件 view，另外还提供了地图、视频、音频等组件

微信小程序使用 MVVM 的开发模式，提倡把渲染和逻辑分离。所以，WXML 具有这样一些能力：数据绑定、列表渲染、条件渲染、模版、事件、引用（ import 和 include），见以下连接
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/
（3）wxss 文件

WXSS 具备 CSS 大部分的特性，小程序在 WXSS 也作了一些扩充和修改。
新增了尺寸单位rpx，小程序底层直接换算，开发者不须要考虑不一样手机设备的屏幕会有不一样的宽度和设备像素比

提供全局样式和局部样式。能够写 app.wxss 做为全局样式， 会做用于小程序的全部页面，写局部样式 page.css 只对当前页面生效

（4）js 文件

咱们经过 js 脚原本处理用户的操做

• WXML上绑定事件

这里的事件能够是：手指触摸相关的一系列事件（如：手指触摸动做开始、触摸后移动、触摸动做结束等）、小程序动画相关的一系列事件（好比：动画开始时、第一次迭代时、动画完成时等）

• 经过调用小程序的 API 来调起微信提供的能力，小程序能力有下面15种

3、生命周期

（1） 注册程序

注册程序的生命周期只有 3 个：onLaunch、onShow、onHide

App() 函数里除了 3 个小程序生命周期函数外，还有其余的一些什么函数能够调用呢？

咱们还能够在 App() 函数里添加错误监听函数、页面不存在时候的监听函数、或者其余任何自定义函数，globalData

（2）注册页面

注册页面的生命周期有 5 个：onLoad、onReady、onShow、onHide、onUnload

先后台定义：当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并无直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台

小程序何时被销毁（也叫关闭小程序）：当小程序进入到后台有一段时间，或者系统占用资源太高，小程序就会被销毁； 当用户从扫一扫、转发等入口进入小程序，而且在没有置顶小程序的状况下退出（下面有截图，分别展现转发入口、小程序置顶）

4、和H5对比

具有的能力
(1) 什么是 H5

首先，H5 ！= HTML5。H5 是一种标准，这套标准包含了一系列的技术规范。咱们在谈论 H5 的时候，其实是在谈论一个问题的解决方案。好比：咱们要作一个炫酷的移动端网站，就要讨论出一个解决方案，这个解决方案不只包含了使用 HTLML5 新增的一些标签，同时也包含了 css三、websocket 通讯、标准盒模型等一切的前端基础知识。
咱们使用一套标准来开发 web 页面，这套标准就叫 H5 。一般，能够把这些 web 页面嵌入到一些 APP 或者 小程序里面，小程序里面使用容器组件 web-view 就能够承载网页

(2) 微信小程序 和 H5 有什么区别

这个题目也能够这样解释：使用微信小程序的标准开发一个项目和 使用 H5 标准开发一个项目有什么区别