微信小程序开发的基本流程步骤

时间：2021-08-27 来源：互联网编辑：宝哥软件园浏览：次

一、微信小程序简介

1.微信小程序简称小程序，张小龙在微信公开课Pro上发布的小程序于2017年1月9日正式上线。

2.微信小程序这个词可以分解为两部分：“微信”和“小程序”

(1)、其中“微信”可以理解为“在微信中”，是指小程序的执行环境；当然，微信不仅提供了执行环境，也延长了用户使用微信的时间。

(2)、“小程序”是指它一开始是一个程序，然后具有可移植性的特点。与其他应用不同，小程序不需要安装，而是通过扫描二维码打开后直接执行；使用后无需卸载。这就是所谓的用后即走原则。

3、微信小程序，很多类似形式的应用都采用类似的架构：

JSON技术用于表示应用程序配置信息。它包含应用程序的基本信息、页面配置和路由、所有应用程序的信息等。使用定制的CSS XML技术实现视图层的描述。屏幕元素，如列表、按钮、文本框、选择框等。都是用遵循XML语法的XML语言来描述的。CSS用于定义页面的通用样式。用JavaScript语言实现逻辑层结构。包括用户操作的处理，系统API的调用等。该架构提供了视图层和逻辑层之间的数据和事件传输，从而将难度降至最低。因为类似的应用是轻型应用，所以提供的功能相对简单。4.JSON是一种轻量级的数据交换格式。它基于ECMASCript(由W3C制定的JavaScript规范)的子集，使用完全独立于编程语言的文本格式来存储和表示数据。简单明了的层次结构使JSON成为一种理想的数据交换语言。便于人们读写，也便于机器分析和生成，可以有效提高网络传输效率。

5.XML(可扩展标记语言)在中文中被称为可扩展标记语言，是标准通用标记语言的子集，用于标记电子文档，使其结构化。

在电子计算机中，标记是指计算机能够理解的信息符号。通过这样的标记，计算机可以处理各种信息，如文章。它可以用来标记数据和定义数据类型。它是一种源语言，允许用户定义自己的标记语言。它非常适合万维网传输，并提供了一种独立于应用程序或供应商描述和交换结构化数据的统一方法。它是互联网环境下跨平台、内容依赖的技术，也是处理分布式结构信息的有效工具。早在1998年，W3C就发布了XML1.0规范，用于简化文档信息在互联网上的传输。

6.CSS层叠样式表(英文全称：层叠样式表)是一种用于表达HTML或XML等文件样式的计算机语言。CSS不仅可以静态修饰网页，还可以用各种脚本语言动态格式化网页的元素。CSS可以在像素级精确控制网页中元素的布局，支持几乎所有的字体大小和样式，并具有编辑网页对象和模型样式的能力。

7.JavaScript是一种文字脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器叫做JavaScript引擎，是浏览器的一部分，广泛应用于客户端脚本语言。它最早用于HTML页面，为HTML页面添加动态功能。

第二，注册微信小程序

在创建自己的微信小程序之前，首先需要注册小程序账户，账户类型如下：

具体注册流程请参考官方简单教程

第三，安装工具和创建项目

第一步：下载安装微信小程序开发者工具。下载路径：

https://MP . weixin . QQ.com/debug/wxadoc/dev/dev tools/download . html

进入下载界面后，根据自己的操作系统选择相应的链接进行下载，下载后安装即可。

步骤2:安装登录工具

我们可以在安装完成后打开开发工具。我们第一次打开时，需要用微信扫码登录，如下图所示。只需用微信扫一扫，确认登录即可。

步骤3:选择项目类型

登录成功后，如果是第一次使用该工具，会弹出选择项目类型的窗口，如下图所示：

第四步：创建一个项目

成功选择项目类型后，会弹出创建项目的窗口，如下图所示：

在创建过程中，如果选定的本地文件夹为空文件夹，将出现一个检查选项“创建云开发快速启动模板”。为了方便初学者了解微信小程序的基本代码结构，请勾选此选项。检查之后，开发人员工具将帮助我们在开发目录中生成一个简单的演示，如下所示：

四、项目代码结构描述及开发

4.1、项目代码结构

点击开发人员工具上方导航中的“编辑器”，我们可以看到这个项目已经初始化，包含一些简单的代码文件。最关键、最本质的是app.js、app.json、app.wxss，其中，js后缀是脚本文件，json后缀是配置文件。wxss后缀是样式表文件。微信小程序会读取这些文件，生成小程序实例。

下面我们简单了解一下这三个文件的功能，便于从头修改开发自己的微信小程序。

1.app.js是小程序的脚本代码。在这个文件中，我们可以监听和处理小程序的生命周期函数，并声明全局变量。调用框架提供的丰富的API，比如这个例子中本地数据的同步存储和同步读取。

2.app.json是整个小程序的全局配置。在这个文件中，我们可以配置小程序由哪些页面组成，配置小程序的窗口背景颜色，配置导航栏样式，以及配置默认标题。请注意，不能向此文件添加任何注释。

3.app.wxss是整个小程序的通用样式表。我们可以在页面组件的class属性上直接使用app.wxss中声明的样式规则。

我们注意到，示例程序的代码中有两个文件夹，一个是pages，另一个是style，其中style是用于常见样式的文件夹，pages是用于所有页面的文件夹。让我们关注这几页。

4.2、小程序页面文件的组成

在这个例子中，我们有七个页面，索引页面，也就是欢迎页面，它们都在pages目录下。微信小程序中每一页的【路径页名】都需要写在app.json的pages中，pages中的第一页就是小程序的第一页。

每个小程序页面都是由四个不同的后缀文件组成的，它们在同一个路径下具有相同的名称，比如index.js、index.wxml、index.wxss和index.json Files with。js后缀是脚本文件。json后缀是配置文件。wxss后缀是样式表文件，以及带有。wxml后缀是页面结构文件。

Index.wxml是页面的结构文件：

！-index . wxml-view class=' container '！-user OpenID-view class=' user info ' button open-type=' getuser info ' bindingserinfo=' ongetuser info ' class=' user info-avatar ' style=' background-image 333 60 URL({ { avatar URL } })'/button view text Jackson shadow/text/view/view class=' text-title ' text hello world/text/view/view在本例中，view/、button/、text/用于构建页面结构，并绑定数据和交互处理功能。

Index.js是页面的脚本文件。在这个文件中，我们可以监控和处理页面的生命周期函数，获取applet的实例，声明和处理数据，响应页面的交互事件。

//索引。jsconst app=GetApp()Page({ data : { avatar URL : })./user-解锁gin。png '，userInfo: {}，logged: false，takeSession: false，requestResult: '' }，onLoad: function() { if(！wx。cloud){ wx。redirectto({ URL : './ChooeLib/ChooeLib '，})返回} //获取用户信息wx。GetSetting({ success : RES={ if(RES . AuthSetting['作用域。UserInfo ']){//已经授权，可以直接调用户信息获取头像昵称，不会弹框wx。getuser info({ success : RES={ this。setdata({ avatar URL : RES . user info。avatarurl，userinfo : RES . userinfo })} })} }))，onGetUserInfo:函数(e) { if(！这个。记录的e .细节。userinfo){这个。setdata({ log : true，avatar URL : e . detail。用户信息。头像网址，用户信息： e .细节。userinfo })})，ongetepinid : function(){//调用云函数wx。云。调用函数({ name : ' log in '，data : })，成功： RES={ console。日志'[云函数][登录]用户openid: '，RES .结果。打开id)应用程序。全球数据。打开id=RES .结果。打开id wx。导航到({ URL : './userConsole/userConsole '，}) }，fail : err={ console。错误([云函数][登录]调用失败，err) wx.navigateTo({ url: './deployFunctions/deployFunctions '，})})}，//上传图片doUpload:函数(){ //选择图片wx.chooseImage({ count: 1，sizeType: ['compressed']，sourceType: ['album '，' camera']，success : function(RES){ wx。showloading({ title : '上传中，})const file path=RES . tempfile path[0]//上传图片const CloudPath=' my-image '文件路径。匹配(/\).[^.] ?$/)[0]wx。云。uploadfile({云路径，文件路径，成功： RES={控制台。日志([上传文件]成功：'，RES)应用程序。全球数据。fileid=RES . fileid app。全球数据。云路径=云路径应用。全球数据。imagepath=filePath wx。导航到({ URL : './storage onsole/storage onsole ' })}，fail : e={ console。错误([上传文件]失败：'，e) wx.showToast({ icon: 'none '，title: '上传失败，}) }，完成：()={ wx。HideLoAding()} })}，fail : e={ console。错误(e)} })}，})index.wxss是页面的样式表：

/* *索引。wxss * */page {背景： # f6f 6；显示： flex flex-方向：柱；正义-内容：中心；}.用户信息.上传者，隧道{页边距-top : 40 rpx；高度： 140 rpx宽度： 100%;背景# fffborder: 1px固体rgba(0，0，0，0.1)；边框-左侧：无；右边框：无；display : flex flex-方向：行；align-items:居中；所有300毫秒的过渡：}.用户信息-头像{宽度： 100 rpx高度： 100 rpxmargin: 20rpx边界半径： 50%;背景尺寸：封面；背景-颜色：白色；}.{边框：无}后的用户信息-头像：}.用户信息-昵称{ font-size : 32 rpxcolor: # 007aff背景-颜色：白色；背景尺寸：封面；}.{边框：无}后的用户信息-昵称：}.上传者，隧道{ height : auto adding : 0 0 40 rpx flex-direction :柱；align-items : flex-start；盒子尺寸：边框盒子；}.上传者-文本，隧道文本{宽度： 100%；线高： 52pxfont-size : 34 rpxcolor: # 007aff}。上传器-容器{宽度： 100%；高度： 400 rpxpadd : 20 rpx 20 rpx 20 rpx 0；display : flex align-content :居中；正义-内容：中心；盒子尺寸：边框盒子；边框-top: 1px实心rgba(0，0，0，0.1)；}.上传者-图像{宽度： 100%；高度： 360rpx}。隧道{ padding: 0 0 0 40rpx }。隧道-文本{位置：相对；color : # 222 display : flex flex-direction : row；align-content:居中；正义-内容：空格；盒子尺寸：边框盒子；边框-top: 1px实心rgba(0，0，0，0.1)；}.隧道-文本：第一个孩子{边框-顶部：无；}.隧道开关{位置：绝对；right : 20 rpxtop :-2r px；}.禁用{ color: # 888}。维修{位置：固定；右： 40rpxbottom: 40rpx宽度： 140 rpx高度： 140 rpx边界半径： 50%;背景技术：线性梯度(#007aff，# 0063 ce)；box-shadow: 0 5px 10px rgba(0，0，0，0.3)；display : flex align-content :居中；正义-内容：中心；所有300毫秒的过渡：}.维修按钮{ position : absolutetop : 40 rpx }。服务：活动{ box-shadow :无；}.请求文本{ padd : 20 rpx 0；font-size : 24 rpx线高： 36rpx断字：断字；}.正文-标题{利润率-前： 50%；}.文本-标题文本{ font-size : 96rpx字体系列： '富兰克林哥特式中等'，' Arial狭义，Arial，无衬线；}页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖app.wxss中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用app.wxss中指定的样式规则。

index.json是页面的配置文件：

页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖app.json的窗户中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用app.json中的默认配置。

{ ' pages ' :[' pages/index/index '，' pages/userConsole/userConsole '，' pages/storage sole/storage sole '，' pages/database guide/addfunctions/deployFunctions '，' pages/chooseLib/chooseLib' ]，' window ' : { ' backgroundColor ' 3: ' # f6f 6 '，' backgroundTextStyle ' 3: ' light '，' navigationBarBackgroundColor ' 3333: ' #影琪，' navigationBarTextStyle ' : ' black ' } }运行结果如下：