html表单制作及实例-一篇文章带你了解陌陌小程序的开发流程

来源：前端进阶学习交流

本文约5000字，建议阅读10+分钟
本文介绍了微信小程序开发从入门到进阶的方法。

前言

小程序你一定很熟悉。 明天我就带大家学习一下陌陌小程序的开发流程。

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

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

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

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

大约有100多兆，不到十秒就可以下载完毕。 下载后，根据需要安装Momo开发者工具。

2.新建一个小程序项目

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

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

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

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

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

3. 小程序结构

我们先看一下小程序的文件布局，如下：

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

4、小程序项目开发分工

小程序可以多人协作开发。 我们可以添加多个Momo好友html表单制作及实例，如图：

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

也可以添加15个。

5、小程序初步探索

1.设置小程序页面

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

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

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

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

这是所有Momo小程序标签。 我们来做一个简单的小程序界面编译。 我们看一下小程序界面，如图：

这是如何实现的？

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

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

只要把demo放到index上，然后我们编译index的页面代码和样式即可，如图：

demo.wxml

demo.wxss

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

注：px和rpx可以相互转换，px是化学像素，rpx是逻辑像素。 通常你在设置rpx时不必担心兼容性问题。

3. 选择器

里面我们使用样式表的基本概念，选择器。 Momo小程序支持以下选择器，如下：

选择器

样本

样品描述

。班级

。介绍

选择所有拥有的组件

＃ID

＃名

选择您拥有的组件

元素

看法

选择所有视图组件

元素，元素

视图、复选框

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

：：后

查看::之后

在视图组件后面插入内容

：：前

查看::之前

在视图组件后面插入内容

4. 数据绑定

但是仅仅制作一个表单是不够的，我们还要处理这个表单传递过来的数据，所以这时候我们需要编译Js代码，所以我们要编译demo.js文件中的代码，如下所示数字：

给数据添加标题，此时数据还没有映射到后端页面。 我们需要在页面文件中编译代码来接收这个值，如图：

这相当于我们jinja2模板引擎中的句型。 在Momo小程序中，我们称之为数据绑定。

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）包括

可以将整个代码引入到目标文件之外html表单制作及实例，相当于将其复制到include位置，如下：

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

3）样式导出

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

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

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

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

9、小程序专属脚本语言

既然小程序有和html、css一样的东西，那么它们也一定有和JavaScript一样的东西。 它是weixinscript，但它与JavaScript不同。 然而，和JavaScript一样，它可以在特定的标签中定义脚本语言，或者专门编写。 后面会介绍一个脚本文件。 那么现在你就跟我一起来看看到底发生了什么吧。

1）编译方法

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

A。 直接进入标签

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

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

‍

b. 说完文件，导出为wxml

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

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

‍

C。 参考wxs文件

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

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

然后在wxml文件中引用这个wxs文件，如下：

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

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

2）变量

既然是脚本语言，其实是有变量的。 我们刚才已经使用过它们了。 一般情况下，var关键字用于声明变量。 事实上，你也可以使用形式参数。 如果没有形参，则为undefined，即空值。

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   默认

上述保留关键字的用法与JavaScript中的保留关键字相同。

4）数据类型

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

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

5）其他仿制药

陌陌小程序还有很多外部泛型来创建小程序的各种功能，比如console、math、json、date等，这些都与JavaScript的用法一致。

10.配置文件

我们可以通过修改配置文件来达到改变页面效果的目的，通常可以分为全局配置、页面配置和站点地图配置。 下面我们就来看看吧。

1）全局配置

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

常用配置选项如右图所示：

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

入口页面路径

细绳

不