小程序form表单提交开发的相关事项

关于小程序的形式形式，小编之前已经介绍了开发步骤，但仍有一些重要问题需要注意。接下来我们来看一下小程序表单提交和开发的相关问题。

1.与之前的web php网站相比，小程序个人理解为只是把web放到微信上，使用小程序的固定格式进行布局、事件触发、数据传输和读取，服务器可以用后端语言编写，但所有数据都必须以json的形式返回给小程序。

2.昨天写了登录注册和忘记密码的功能，本质上是一个表单提交操作。所以拿注册函数来写这个例子。

3.目录地图

js文件是逻辑控制的，主要是因为它发送请求，接收数据，json用于此页面的本地配置，并覆盖全局app.json配置。

wxss用于页面样式设置。

wxml是一个页面，相当于html

4.样式和json文件暂时被忽略。我只想看一下表格的提交情况

5.wxml文件代码

注册

注册

忘记密码

6.需要理解几个关键点

a.a.form需要与submit事件绑定。在applet中，属性是bindsubmit。

bindsubmit="formsubmit "这里的formsubmit属性值可以命名为符合规范的任意值，相当于以前html中的onsubmit="formsubmit "。是一个函数名，提交时触发函数事件formsubmit，这个函数是用js写的。

b其他属性和前面的html类似。注意表单必须有name="value "，后端处理和之前一样。比如name="username" php可以用$ _ post ['username']来接收。

c.因为applet没有输入提交按钮，所以每个表单中都应该有一个提交按钮。

此按钮用于打开提交事件。

7.index.js代码

页面({

数据： {

},

formsubmit:函数(e) {

if(e . detail . value . mobile . length==0 | | e . detail . value . password . length==0){

wx.showtoast({

标题：“手机号码或密码不能为空！”,

图标： '加载'，工期： 1500

})

settimeout(函数{

wx.hidetoast

},2000)

} else if(e . detail . value . mobile . length！=11){

wx.showtoast({

标题：“请输入11位数字的手机号码！”,

图标： '加载'，工期： 1500

})

settimeout(函数{

wx.hidetoast

},2000)

} else if(e . detail . value . password . length 6 | | e . detail . value . password . length；20){

wx.showtoast({

标题：“请输入6-20个密码！”,

图标： '加载'，工期： 1500

})

settimeout(函数{

wx.hidetoast

},2000)

} else if(e . detail . value . password！=e.detail.value.repassword){

wx.showtoast({

标题：“两次输入不一致的密码！”,

图标： '加载'，工期： 1500

})

settimeout(函数{

wx.hidetoast

},2000)

}else{

wx.request({

url : ' https://shop . yun apply.com/home/log in/register '，header: {

内容类型' : ' application/x-www-form-url encoded '

},

方法： '发布'，data : { mobile : e . detail . value . mobile，password : e . detail . value . password }，成功：功能(res) {

if(res.data.status==0){

wx.showtoast({

title: res.data.info，图标： '加载'，工期： 1500

})

}else{

wx.showtoast({

title: res.data.info，//登录成功。

图标： '成功'，工期： 1000

})

}

}

})

}

},

})

8.应该指出的是

页面是放置js对象的必要方法，用于在加载页面时呈现效果

data: {}，data对象，设置页面中的数据，前端可以通过读取这个对象中的数据来显示。

formsubmit:函数小程序中的方法都是方法名： function，其中函数可以传入一个参数作为触发当前时间的对象

下面是函数的执行。因为验证太多，我只拿出一部分来理解。

if(e . detail . value . mobile . length==0 | | e . detail . value . password . length==0){

wx.showtoast({

标题： '手机号码或密码不得为空!',

图标： '加载，工期： 1500

})

这里的e，就是当前触发事件的对象，类似于htmlonclick="foo(this)"这个对象，小程序封装了许多内置的调用方法，e.detail.value.mobile就是当前对象name="mobile "的对象的值e.detail.value.mobile.length就是这个值的长度

祝酒词类似于射流研究…中的警惕，弹出框，标题是弹出框的显示的信息，图标是弹出框的图标状态，目前只有装货和成功这两个状态持续时间是弹出框在屏幕上显示的时间。

9.重点来了

wx.request({

网址： 'https://shop.com/home/login/register'，header: {

内容类型： '应用程序/x-www-form-url编码'

},

方法： '发布，数据： { mobile : e . detail。价值。手机，密码： e . detail。价值。密码}，成功：功能(res) {

if(res.data.status==0){

wx.showtoast({

title: res.data.info，图标： '加载，工期： 1500

})

}else{

wx.showtoast({

title: res.data.info，//这里打印出登录成功

图标： '成功，工期： 1000

})

}

},

fail:function{

wx.showtoast({

标题： '服务器网络错误!',

图标： '加载，工期： 1500

})

}

})

wx.request({})是小程序发起安全超文本传输协议请求，注意http是不行的。

这里

a.url是你请求的网址，比如以前在前端，发布表单中action='index.php '，这里的index.php是相对路径，而小程序请求的网址必须是网络路径。

比如：https://店铺。com/home/log in/register

b.

header: {

内容类型： '应用程序/x-www-form-url编码'

},

由于帖子和得到传送数据的方式不一样，发布的页眉必须是

内容类型： '应用程序/x-www-form-url编码'

得到的页眉可以是接受' : '申请/json '

c.一定要写明方法* " post "默认是"得到",保持大写

数据： { mobile : e . detail。价值。手机，密码： e . detail。价值。密码}，这里的数据就是帖子给服务器端的数据以{name:value}的形式传送

d.成功回调函数

成功：功能(res) {

if(res.data.status==0){

wx.showtoast({

title: res.data.info，图标： '加载，工期： 1500

})

}else{

wx.showtoast({

title: res.data.info，图标： '成功，工期： 1000

})

}

}

e .成功：函数是请求状态成功触发是事件，也就是200的时候，注意，请求成功不是操作成功，请求只是这个程序到服务器端这条线的通的。

故障：功能就是网络请求不成功，触发的事件。

f.if(res.data.status==0){

wx.showtoast({

title: res.data.info，图标： '加载，工期： 1500

})

}else{

wx.showtoast({

title: res.data.info，//这里打印出登录成功

图标： '成功，工期： 1000

})

}

这里的一段代码与php后端程序有关。具体流程如下。

1.post使用数据到https://shop.com/home/login/register.的接口如果你用过thinkphp你就知道是home模块登录控制下的注册方式

2.2.register方法根据来自post和数据库的数据执行二次验证。如果操作成功，返回什么，如果操作失败，返回什么？

3.后端php代码如下：

logincontroller.class.php主计长

/**

*用户注册

*/

公共功能寄存器

{

if (is_post) {

$ user=d(' user ')；

if(！$ user-；create($_post，4)) {

$ this-；错误($ user-；geterror，”，true)；

} else {

if($ user-；注册){

$ this-；成功('注册成功！'，''，true)；

}else{

$ this-；错误('注册失败！'，''，true)；

}

}

}

}

模型

usermodel.class.php的注册方法

公共功能寄存器

{

$ mobile=i(' post . mobile ')；

$ password=i(' post . password ')；

$ res=d(' user ')-；add(array(

mobile '=；$mobile，密码'=；md5($password)，modify time '=；日期(' y-m-d h:i:s ')

));

return $ res

}

除了小程序表单表单的提交过程，以上提到了表单开发的一些要点，很重要。希望大家认真阅读学习。如果想获得更多相关信息，请关注源社网的小节目频道。

下面是题目的开头。微信小程序真的能火起来吗？标题到此结束

微信小程序真的能火起来吗？自从微信推出微信小程序以来，小程序热度不减，众多媒体和企业趁机获得了大量访问。然后有人质疑微信小程序真的能火吗？下面小系列介绍一下。

当业内各方对小程序由热转冷的去向感到茫然时，微信却下起了及时雨。

2021年3月27日，微信推出小程序6项新功能，包括个人开发者可以申请小程序，微信账号自定义菜单可以打开相关小程序，微信账号模板消息可以打开相关小程序，微信账号关联小程序时，粉丝可以选择发送通知，移动应用可以共享小程序，普通链接二维码可以打开小程序。

微信的比较新举措被视为推动小程序应用进一步发展的新动力，帮助线下商店更好地拥抱新的零售形式，从而引起业界的广泛关注。

回想两个月前的1月8日，微信宣布小程序正式上线。“小程序将成为下一个窗口”、“app已死，小程序应该屹立”等声音密集涌现，似乎又一个革命时代即将来临。然而，这熊熊燃烧的大火，在春节过后悄然熄灭。为什么当人们对一项重大创新寄予厚望时，市场会出现如此大的起伏？小程序是早死还是继续强势？微信新六大功能对小程序有什么好处？小程序的发展前景将是微信推出新功能后的第一次。it时代网拜访了中国第一家第三方小程序开发者小云，与赵建博士探讨了小程序的现状和未来。

晓云合伙人赵建，2020年毕业于哈尔滨工业大学，计算机技术与科学博士，参与国家863工程，2021年创建安米网络，2021年与安米团队加入光网络，2021年带领团队推出晓云。微信小程序制作平台有三个，如霄云商家电商小程序、霄云社区小程序。截至目前，已有近400家商家、中小企业和网站、微信微信账号等在线社区

赵建：我们只想专注于做小项目。2021年1月，晓云合伙人赵建在张小龙发表演讲(张小龙透露，微信将在下一步推出申请号，也就是现在的小程序)。他敏锐地意识到移动照明应用的春天即将到来。因为，作为中国比较早的在线移动应用生产平台创业者之一，赵建非常清楚，无论移动应用多么简单，在发展中总有各种门槛。构建一个可以方便普通用户定制的自助开发平台是一个强烈的需求。

很快，他在内部成立了小程序制作平台的开发团队。2021年9月，小程序宣布内部测试后。霄云率先在中国推出了面向网络社区、地方网站、微信账号的小程序制作平台——霄云社区小程序

对于本地商家，电商公司，企业。2021年1月9日，就在微信正式推出小程序的第二天，霄云正式宣布推出三档节目制作平台，这将让大家轻松制作一个微信小程序。根据数据，微商户小程序制作平台具有信息展示、店铺管理、订单管理、在线充值、会员系统、在线预订等功能。还提供会员卡、限时优惠、附近商家推荐等工具。可以帮助文化传媒、体育健身、休闲娱乐、母婴教育、美容旅游酒店等本土企业快速搭建微信o2o平台。晓云商户电商平台制作平台不仅提供商品展示、店铺管理、促销推荐、支付储值、订单管理、会员系统、地址管理等功能，还提供了狼牙、团购、优惠券、会员卡等工具。可以帮助企业、商场、超市、电器城、服装店、零售商等。要快速搭建微信电商平台。霄云社区小节目制作平台提供了浏览、评论、互动、社交、话题、购买、群组等个性化需求。整合光门户和微论坛模式，满足运营商内容发布、互动交流、会员群、统计管理、广告营销等需求。这样每个媒体和区域论坛都可以建立一个新的在线社区

为什么微信的“亲生儿子”忽冷忽热？

晓云办公场景“小程序本质上是解决服务号的缺陷，为线下商家服务，打开它的小程序就像打开一个app，有服务有产品”，赵建说，小程序将连接实体企业的线下业务。但是，业界已经在小程序上放置了强大的新流量平台。因为小程序是微信的“亲生儿子”，80%使用小程序的人都想通过微信获得流量，尤其是商家，他们只想用小程序进行营销、分享、圈圈，不断做各种诱导和鼓励，让用户一级一级往下分享。其实小程序上线后没有那么多流量入口，让很多人对小程序失望。

对此，赵建表示：第一，小程序的初衷是建立一个堪比app和h5的标准体系，它是跟随社交、阅读、支付生态的微信成员，不可能为了短期目标牺牲长期发展。第二，微信从微信账号出来就大力营销，但微信不再希望用小程序来营销，只想为其创造一个生态平衡的环境。

从盲目狂热到理性转型，从热到冷，这是业内比较直观的感受。“这就是微信的策略。可能在很长一段时间内，微信不会给小程序赋予特殊的微信营销功能，但微信一定会给小程序增加h5达不到的功能。毕竟是微信的直接力量。

app死了，小程序该不该站？

赵建继续看好小程序，特别是3月底，微信推出了10多个新动能，向第三方平台和配件开放小程序。这些功能大大降低了小程序的门槛，将进一步增加小程序的普及。比如在微信账号中，给小程序更多的连接和分流，强调用小程序慢慢取代公众账号菜单栏上的h5的意图，微信账号菜单底部可以打开小程序。满足商家的比较大好处就是小程序可以选择向粉丝推送信息，让小程序主动接触到一部分用户。另外，如果商家离线有常用链接二维码，可以在小程序管理后台配置。用户可以通过扫描原行下的常用链接二维码、卡券、蓝牙直接打开小程序。这意味着微信终于开始为小程序开发者撕开线上流量的一个缺口。但他不同意“app死了，小程序就该站着”的说法。

他认为，未来移动互联网会有小程序、app、h5的趋势。赵建说，中国的移动互联网模式决定了大app是入口。但是手机安装app成本太高，获得客户的成本也在上升。铁粉以外的用户很难依赖app。他们可能更倾向于选择低流量消耗、低内存、低功耗的轻量级应用，应用使用一段时间后就会被卸载或者变成僵尸应用。既然可以用微信里的小程序解决问题，为什么要安装智能手机中不常用的应用？相反，小程序更适合。那么，如何判断应该选择app还是小程序呢，赵建建议：“一是基于使用场景是否适合app，二是功能是否必须由app完成。如果不需要这两点，那就用吧。小程序加h5比较合适，h5主要是朋友分享。”

有趣的是，在微信推出6项新功能的第二天(3月28日)，mobike与微信达成战略合作，进入后者的“九宫格”，使得mobike发布的二维码成为一个天然的小程序入口。mobike的产品负责人杨玉杰指出，用户可以通过扫描代码直接跳转到小程序，小程序的使用量在之前的5000万次的基础上翻了一番，从而降低了mobike的客户获取成本。

“我们的比较终目标是迅速教化小程序，也就是说，你可能会花两三千美元迅速拥有一个小程序，或者明年，小程序将成为中小企业的标准。”赵建说。

业内之声指出，一切都是以结果为导向的，商家只看重流量，但小程序能否帮助商家快速挖掘尽可能多的流量，还有待观察。