微信小程序入门

最新推荐文章于 2024-09-24 09:03:08 发布

weixin_34067049

最新推荐文章于 2024-09-24 09:03:08 发布

阅读量267

点赞数

文章标签： json 开发工具移动开发

原文链接：https://segmentfault.com/a/1190000015631150

版权

一、运行环境

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

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

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

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

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

（3）初始化小程序项目

说明：

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

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

开发工具界面介绍


    1、模拟器：微信小程序界面效果在此展示，开发者可以选择不同的设备

2、编辑器：在这个地方可以看到整个项目的文档目录结构

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

    8、 Storage，使用  wx.setStorage  或者  wx.setStorageSync  对数据进行存储。这里注意，不需要该数据时应及时销毁
    9、  AppData,  显示当前项目运行时小程序 的具体数据，实时地反映项目数据情况，可以在此处编辑数据，并及时地反馈到界面上
   10、 Wxml，相当于浏览器控制台的 “Elements”，在这里开发人员可以方便的查看 dom 结构，或者可以进行 CSS  样式的调整
4、通常使用小程序模式

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

6、前后台切换。默认是前台，这样在模拟器我们看到的是页面展示效果；当选择切换到后台的时候，此时用户可以在模拟器进行选择，帮助开发者模拟一些客户端的环境操作

7、清缓存

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

12、显示该小程序的AppID，项目地址等。一个小程序只有一个AppID，这个AppID相当于该小程序的身份标识

13、项目设置

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

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

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

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

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

二、目录结构

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

四种不同类型的文件：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种

三、生命周期

（1）注册程序

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

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

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

（2）注册页面

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

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

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

四、和H5对比

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

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

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

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