北京华网天下

今日鸡汤只解沙场为国死，何须马革裹尸还

2023-08-11

来源：网络整理

点击上方“前端进阶学习交流”即可关注

回复“前端”即可免费获得前端相关学习资料

现在

天

鸡

汤

只撤沙场，为国捐躯，何必还马皮裹尸。

大家好，我是高级学习者。前言

小程序大家应该都很熟悉了。今天小编就带大家了解一下微信小程序的开发流程。

1.申请微信公众号并下载微信开发者工具

这个就不一一介绍了。网上有教程。申请成功后，打开后台，我们找到小程序，下载微信开发者工具，如图：

这里我们选择常用的小程序开发工具，点击微信开发者工具，如图：

然后选择对应版本的工具，我们选择稳定版本，如图：

大约有100兆字节，不到十秒就可以下载完毕。下载后，根据要求安装微信开发者工具。

2.新建一个小程序项目

第一次启动时会出现一个二维码，我们需要扫描它来登录，登录后我们就可以开始开发了，如图：

首先我们在小程序中选择它，如图：

然后我们新建一个项目，并设置项目的参数，如图：

设置完成后，点击新建，打开微信开发者工具，如图：

正如您所看到的，这与我们的浏览器有很多相似之处。我们点击头像后，就会显示登录时间。其实这是启动小程序的日志时间，如图：

3、小程序的结构

我们先看一下小程序的文件结构图，如下：

可以看到只有js、json、wxml、wxss这四个后缀的文件。最前面的文件夹是主页，.js（逻辑）、.wxss（样式）、.wxml（结构）； logs文件夹是登录日志，他的几个文件的用法和他的类似； app.js（逻辑）、app.json（配置）、app.wxss（样式）是小程序的配置文件，通过它们渲染页面并启动小程序； util.js（逻辑）使用这个文件来加载脚本，使用，最后一个..json是构建项目时的配置文件。

4、小程序项目开发事业部

小程序可以多人开发，我们可以添加多个微信好友，如图：

可绑定15个微信号。还可以添加体验会员，即用来测试小程序功能的微信好友，如图：

也可以再添加 15 个。

五、小程序初步学习 1、设置小程序页面

现在让我们尝试编写一个我们自己的小程序。我们都知道，创建小程序时都会有一个配置文件。让我们来看看：

然后我们可以修改小程序的标题名称，如图：

只需将窗口标题修改为其他文本即可。还可以在第一词典中设置首页的页面地址和首页的日志。这时候我们就可以重置一个页面来实现我们设置的微信小程序的界面效果。首先我们建立一个微信小程序的页面文件夹，如图：

我们按照图中的操作步骤进行操作，然后按Ctrl+S保存；然后我们在demo文件夹下的demo.wxml文件中添加前端页面代码。这个文件相当于一个Html文件，另一个demo.wxss相当于css，我们需要通过添加小程序的组件来编写小程序的内容，如图：

这里是所有微信小程序的标签。我们来写一个简单的小程序界面。我们看一下小程序，如图：

那么这是如何做到的呢？

2.完成小程序页面的代码

我们需要替换app.json中的demo文件夹和初始文件，如图：

把demo放在前面就好了，然后我们写页面代码和样式，如图：

demo.wxml

demo.wxss

可以看到我们在输入框中输入了相关内容，一个非常简单的表单就创建好了。

注：px和rpx可以相互转换，px是物理像素，rpx是逻辑像素。一般情况下，设置rpx时不必担心兼容性问题。

3. 选择器

上面我们用到了样式表的基本概念，选择器，微信小程序中支持以下选择器，如下：

选择器示例示例描述

。

选择所有拥有的组件

＃ID

选择拥有的组件

看法

选择所有视图组件

看法，

选择所有文档视图组件和所有组件

看法：：

在视图组件后面插入内容

看法：：

在视图组件之前插入内容

4. 数据绑定

但是仅仅制作表单还不够，我们还要处理表单传过来的数据，所以这时候我们需要编写Js代码，所以我们要把代码写在demo.js文件中开发微信小程序微信登陆需要付费，如下所示数字：

在data中添加一个标题，但是此时数据无法映射到前端页面，我们需要在页面文件中编写代码来接收这个值，如图：

这相当于我们模板引擎中的语法，我们在微信小程序中称之为数据绑定。

5. 列表渲染

另外，还有例如列表渲染，如下：

demo.wxml

demo.js

这样我们就可以向前端页面传递一个数组，如图：

如果我们想迭代这个数组怎么办？当然是可以的，demo.js的内容不变，只需修改demo.wxml的内容即可，如图：

可以看到打印出来的结果。

6. 条件渲染

与列表渲染相比，不同的是可以进行判断，如下：

demo.wxml

demo.js

这样就可以得到最终的值为2，如图：

如果我们想一次性判断多个组件，可以使用一个标签将多个组件包裹在它们的阿里中，如下：

demo.wxml

可以看到返回了第二个条件的值。

7. 模板

wxml中的模板可以使用标签''定义在不同的地方，首先创建一个模板，如下：

<template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} view>template>

然后使用is属性来声明所需的模板，如下：

<template is="staffName" data="{{...staffA}}">template><template is="staffName" data="{{...staffB}}">template><template is="staffName" data="{{...staffC}}">template>

然后传入模板需要的数据，并在demo.js的数据字典中添加几个键值对，如下：

staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}

现在我们可以在屏幕上看到这些模板的示例，如图所示：

8. 报价

wxml提供了两种文件引用方法，下面我们详细看一下。

1）。

该引用方法只能使用导入的文件，下一级导入时无法调用该方法。例如，c 导入 b，b 导入 a，c 不能调用 a。我们来看一下，如图：

要生效，文件必须放在同一个目录下，然后我们看看效果，如图：

2）。

可以导入目标文件中除目标文件之外的全部代码，相当于复制到该位置，如下：

这样我们就可以将网页文件中的所有内容导入到另一个页面中，如图：

3）。风格导入

如果我们想共享样式文件中的样式，我们可以使用它。首先我们新建一个样式文件，然后编写代码，如图：

然后导入到指定的wxss文件中，如图：

最后我们可以看到背景颜色发生了变化，如图：

如果我们有时需要统一的样式，可以直接设置全局样式，如图：

9、小程序专属脚本语言

既然小程序和html、css有相同的东西，那么它就一定有和html、css相同的东西，是的，而且和它不同，但是它可以在特定的标签中定义脚本语言或者写一个脚本文件并导入它。那么现在大家就跟我一起来看看到底是怎么回事吧。

1）。书写方法

我们可以将脚本文件写入标签中，或者写入.wxs文件中。如下：

1））。直接写入标签

直接在wxml文件中定义一个wxs标签，然后写入内容，如下：

"index">var bb= function (val) {return val}module.exports = {key:bb} {{index.key(12)}}

2））。写入文件，然后导入到wxml中

首先创建一个wxs文件，内容如下：

var bb= function (val) { return val } module.exports = { key:bb } module.exports.msg = "hello";然后再导入并且使用，如下："demo.wxs" module="demo"/><view>{{demo.msg}}view>{{demo.key("world")}}</view>

3））。参考wxs文件

我们可以使用函数来引用wxs模块。首先，创建一个新的wxs文件，内容如下：

var d= require("demo.wxs");console.log(d.msg);console.log(d.key(111))

然后去wxml文件引用wxs文件，如下：

"gg.wxs" module="gg" />

可以看到最终的结果，如图：

2）。多变的

既然是脚本语言，当然就存在变量。我们刚才已经用过了。一般情况下，var关键字用于声明变量。当然，你也可以赋值。如果不指定值，则该值将为空值。

3）。保留关键字

delete 删除void typeof 类型判断null 空指针undefined 没有定义NaN 空Infinity 无穷大var 变量定义if 如果else 否则true 真false 假require 引入wxs文件this 对象本身function 函数定义arguments 函数参数本身return 返回for 遍历while 当型循环do 当型循环的结束标识break 终止continue 跳过并进入下一个循环switch 选择判断case 判断的情况default 默认