博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序-提交信息(姓名,电话)
阅读量:6818 次
发布时间:2019-06-26

本文共 2398 字,大约阅读时间需要 7 分钟。

wxml:

<view class='info' wx:if="{
{infoCeng}}">
     <view class='infobox'>
         
<form bindsubmit='searchBox'>
                <view class='listinfo'>
                     <text>姓名:</text>
                     <input type='text'
name="myname" id='name' class='inputinfo'></input>
                </view>
                <view class='listinfo'>
                     <text>电话:</text>
                     <input type='tel'
name="tel" id='tel' class='inputinfo'></input>
               </view>
               <button type='submit' id='tijiao'
form-type='submit'>提交</button>
   
   </form>
    </view>
</view>
 
js:
searchBox:function(e){
         var that=this;
         that.setData({
                showPage:true,
          })
         nameUser = e.detail.value.myname;
         telUser = e.detail.value.tel;
         console.log(nameUser + telUser)
         if (nameUser=="") {
                wx.showToast({
                       title: '请输入您的姓名',
                       duration:1000,
                       icon:"none"
                })
               return;
          } else if (
!/1[3-9]\d{9}/.test(telUser)) {
                wx.showToast({
                      title: '请正确输入您的手机号',
                      duration: 1000,
                      icon: "none"
                 })
                 return;
          }else{
               wx.login({
                    success: function (lgres){
                            wx.request({
                                      url: 'https://xxxxxxx.com/Client.aspx',
                                      method: 'POST',
                                      data: {
                                             ModuleName: "WX_BJML",//空间名 接口文档里每个接口会有标明 必填
                                             MethodName: "SubInfo",//方法名 接口文档里每个接口会有标明 必填
                                             Guid: "",//令牌获取到的值 必填(获取令牌接口例外)
                                             Token: "",//使用令牌md5加密生成的token值 必填(获取令牌接口例外)
                                             Data: {
                                                      code: lgres.code,// lgres.code,//只查某个人的 不填不限制
                                                      name: nameUser,//姓名
                                                       tel: telUser,
                                               }
                                          },
                                    header: {
                                             'content-type': 'application/json'
                                    },
                                    success: function (res1) {
                                                  console.log("信息提交成功");
                                                  console.log(res1)
                                                  wx.showToast({
                                                        title: '礼品领取成功',
                                                        duration:1500,
                                                         icon: "none"
                                                  })
                                                    that.setData({
                                                              infoCeng:false,
                                                               linqushow:false,
                                                               monery:"您已成功领取礼品:"+liping,
                                                   });
 
                                     },
                                  fail:function(){
                                       },
                               complete:function(){
                                          that.setData({
                                            showPage: false,
                                         })
                                 }
                       })
                 }
        })
 
     }
},
 
更新于2018-3-16上午
上面的代码中是正常的情况下,不会发展其他的额外需求下可以那样书写;
若是后期客户需要推送模板消息时,那我们前端的代码就要有所改变
1.将form标签放在页面的最外层
2.form标签将组件内的用户输入的<switch/><input/><checkbox/><slider/><radio/><picker/>
3.当点击<form/>表单中formType为submit的<button/>组件时,会将表单组建中加上name来作为Key.
wxml:
<form bindsubmit="formsubmit">
<view class='info' wx:if="{
{infoCeng}}">
     <view class='infobox'>
                <view class='listinfo'>
                     <text>姓名:</text>
                     <input type='text' 
name="myname" id='name' class='inputinfo'></input>
                </view>
                <view class='listinfo'>
                     <text>电话:</text>
                     <input type='tel' 
name="tel" id='tel' class='inputinfo'></input>
               </view>
               <button type='submit' id='tijiao' 
form-type='submit'>提交</button>
    </view>
</view>
</form>
formsubmit:function(e){
     
console.log('form发生了submit事件,携带数据为:', e.detail.value)
      console.log('form返回formId,携带数据为:', e.detail.formId);
      //下面的内容更上面的一样
}

转载于:https://www.cnblogs.com/liuqingxia/p/8553796.html

你可能感兴趣的文章
基于spark和sparkstreaming的word2vec
查看>>
C++系统学习之五:表达式
查看>>
JPA多对一单向关联
查看>>
系统查看硬件相关信息命令
查看>>
sublime 3 text 中运行Java
查看>>
前序遍历
查看>>
loadrunner检查点设置失败,日志中SaveCount无法被正常统计出来
查看>>
循环结构进阶
查看>>
bzoj 2809: [Apio2012]dispatching
查看>>
关于数据库查询时报“query block has incorrect number of result columns”
查看>>
记录一款Unity VR视频播放器插件的开发
查看>>
webApi跨域问题
查看>>
读取文件
查看>>
json字符串转换对象的方法1
查看>>
浅谈网站路径分析 转自“蓝鲸网站分析博客”
查看>>
C# Note36: .NET unit testing framework
查看>>
我的博客第一天
查看>>
Aptana studio 3前端开发编辑器推荐
查看>>
RMAN restore fails with ORA-01180: can not create datafile 1 (文档 ID 1265151.1)
查看>>
转 多个版本的数据库在同一服务器上ORA-12557
查看>>