微信小程序入门

区星
• 阅读 4106
一、运行环境

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

我们知道,微信小程序运行在三端: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 标准开发一个项目有什么区别

微信小程序入门
微信小程序入门

点赞
收藏
评论区
推荐文章
小森森 小森森
2年前
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦【区别】:微信小程序的代码与QQ小程序的源码是不一样的。微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小
胡哥有话说 胡哥有话说
4年前
微信小程序支付功能全流程实践
前言微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的API完成支付功能,方便、快捷。小程序开发者在开发小程序时,支付流程是必然要接触到,今天胡哥就小程序支付的全流程为大家一一细说,让小伙伴能快速得掌握小程序支付能力,避免踩坑!知己知彼,方能百战不殆小程序支付流程图小程序支付交互流程图(https:/
胡哥有话说 胡哥有话说
4年前
喜大普奔,微信终于支持外网打开小程序啦!
前言千呼万唤始出来,微信小程序终于支持以URLScheme的形式从外部唤起了。longlongago我们只能在微信内的网页中使用微信开发标签小程序跳转按钮
梦
4年前
微信小程序modal
首先创建一个组件component,组件命名可以为modalmodal.wxml的内容为<viewclass'modalmask'wx:if'{{show}}'bindtap'clickMask'<viewclass'modalcontent'<scrollviewscrollyclass'mainc
Stella981 Stella981
3年前
App唤起微信小程序和回调
在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转,非同一开放平台账号下的小程序需与移动应用(APP)成功关联后才支持跳转。可在“管理中心移动应用应用详情关联小程序信息”,为通过审核的移动应用发起关联小程序操作。唤起App打开下程序他有两种方式:1,通过App分享小程序卡片到微信,然后在微信上点击小程序卡片打开小程序,
Wesley13 Wesley13
3年前
5G消息与微信小程序互联互通?北京国都互联这么做……
最近微信小程序上线了一个超级流量的新入口URLScheme,据微信官网介绍,scheme码适用于短信、邮件、外部网页等拉起小程序的业务场景。通过小程序页面的URLScheme,可以在短信、邮件或微信外部的网页中打开微信小程序。意义在于将微信流量生态延伸到微信以外渠道,进一步完善了小程序和外部渠道互通的营销场景。北京国都互联第一时
京东小程序平台助力快送实现跨端 | 京东云技术团队
前言:京东小程序开放平台是由京东自主研发的开发者开放平台,类似于微信和支付宝的小程序开放平台,提供了丰富的开放能力和完整的小程序开发生命周期所需的功能。开发者可以轻松地使用开发者工具IDE进行开发、调试、预览和代码转换,并在控制台进行线上小程序发布、审核、
曼成 曼成
1年前
一文教你如何在小程序中快速接入验证码短信API
在微信小程序中接入验证码短信API,可以为用户提供便捷的验证服务。本文将详细介绍如何在小程序中实现这一功能,包括UI设计、API请求以及代码实现。