微信小程序的开发方法 今日鸡汤只解沙场为国死，何须马革裹尸还

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序的开发方法 今日鸡汤只解沙场为国死，何须马革裹尸还

回复“前端”即可领取前端相关学习资料

现在

天

鸡

汤

刚刚在战场上为国而死，为何还要裹着马皮归来？

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

小程序大家一定都不陌生。 今天我就带大家了解一下微信小程序的开发流程。

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

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

这里我们选择普通小程序开发工具，点击微信开发工具，如图：

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

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

2.新建一个小程序项目

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

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

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

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

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

3.小程序结构

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

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

4、小程序项目开发分工

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

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

也可以添加15个。

五、小程序初步探索 1、设置小程序页面

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

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

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

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

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

那么这是如何实现的呢？

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

我们需要交换app.json中demo文件夹和初始索引文件的位置，如图：

只要把demo放在index前面，然后我们写index的页面代码和样式即可，如图：

demo.wxml

demo.wxss

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

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

3. 选择器

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

选择器示例示例描述

。班级

。介绍

选择所有拥有的组件

＃ID

#

选择您拥有的组件

看法

选择所有视图组件

,

看法，

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

：：后

查看::之后

在视图组件后面插入内容

::

看法：：

在视图组件之前插入内容

4. 数据绑定

但仅仅制作一个表格是不够的。 我们还要处理这个表单传入的数据，所以这时候我们需要编写Js代码，所以我们要把代码写在demo.js文件中，如图：

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

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

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相同的东西。 是的，它与 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   默认

上述保留关键字的用法与.

4).数据类型

它与 的数据类型相同。 具体使用方法这里不再赘述。 我们看一下数据类型，如下：

number ：数值string ：字符串boolean：布尔值object：对象function：函数array : 数组date：日期regexp：正则

5).其他类库

微信小程序还内置了很多类库来完善小程序的各种功能，比如math、json、date等，与用法一致。

10.配置文件

我们可以通过更改配置文件来达到修改页面效果的目的。 一般可以分为全局配置、页面配置和配置。 下面我们就来看看吧。

1).全局配置

它是一个配置文件，配置小程序的全局属性。 它有很多配置项，只有在app.json文件中设置才能生效，如图：

常用配置选项如下所示：

属性类型 所需描述 *低版本

不

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等