精华内容
下载资源
问答
  • 微信小程序表单
    2021-09-02 13:35:30

    html

    <form class="page__bd" bindsubmit="formSubmit" bindreset="formReset">

    <l-input label="标题" name='title' bind:linblur='title'  rules="{{titleRules}}" placeholder="请输入标题"  />

    <l-textarea name='dream'  bind:linblur='dream' auto-focus="true" placeholder="说说你的想法吧..."  />

    <view wx:if="{{id==3}}">

      <!-- <l-image-picker name='img' count="9" bind:linchange="onChangeTap"  bind:linremove="remove" /> -->

    </view>

    <view wx:else="{{id!=3}}">

      <l-image-picker name='img' count="9" bind:linchange="onChangeTap"  bind:linremove="remove" />

    </view>

    <input type="text" hidden="true" name='type_id' value="{{id}}" />

    <view>

      <l-button size="mini" bindtap="address">位置</l-button>

     <input type="text"  name='address' value="{{address}}" />

    </view>

    <checkbox-group   bindchange="checkboxChange" wx:for="{{label}}" wx:key="id">

    <checkbox  value="{{item.id}}">{{item.title}}</checkbox>

    </checkbox-group>

      <view class="btn-area">

          <button form-type="submit">Submit提交</button>

      </view>

    </form>

     js

    data:{
        path:[],
        url:'',
        address:'',
        label:[],
        labels:[],
        allValue:''
    }
    
    
    //图片上传
    onChangeTap(e){
        let img_url =e.detail.current
         this.setData({
            url:img_url
         })
       var token = wx.getStorageSync('token')
         let img = this.data.url;
       for (let index = 0; index < img.length; index++) {
       wx.uploadFile({
         filePath:img[index],
         name: 'pic',
         url: 'http://www.money.com/api/wx/img',
         formData:{token},
          success:res=>{
            // let url = res.data
             let path = this.data.path
             path.push(res.data)
             this.setData({
               path
             })
          }
       })
      }
      },
    
    
    //图片删除
     remove(e){
        let index = e.detail.index
        let path = this.data.path
        path.splice(index,1)
        this.setData({
          path
        })
      },
    
    //地图获取地址
    address(e){
      wx.chooseLocation({
        latitude: 0,
        success:res=>{
         let address = res.address
         this.setData({
          address
         })
       }
      })
    },
    
    //复选框
    checkboxChange:function(e){
      let id = e.detail.value
      let labels  = this.data.labels
      labels.push(id[0])
      this.setData({
        labels
      })
    },
    
    //表单提交
     formSubmit: function(e) {
        console.log('form发生了submit事件,携带数据为:', e.detail.value)
    
        this.setData({
          allValue:e.detail.value
        })
        let labels  = this.data.labels
        let token =wx.getStorageSync('token');
        let allValue = this.data.allValue
        wx.request({
          url: 'http://www.money.com/api/wx/friend_list',
          data:{token,allValue,labels},
          method:"POST",
          success:r=>{
            console.log(r)
            if(r.data.code==200){
              wx.showToast({
                title: r.data.msg,
                icon: 'success',
                duration: 2000,
                success:function(){
                  setTimeout(function () {
                    //要延时执行的代码
                    wx.navigateTo({
                      url: '/pages/friend/friend'
                    })
                  }, 2000) //延迟时间
                }
              })
            }
          }
        })
       }
    

    后端做处理

     //图片上传
        public function img(Request $request)
        {
            $file = $request->file('pic');
            $suffix = $file->getClientOriginalName();//后缀名,判断一下
            $files = substr(strrchr($suffix, '.'), 1);
            if($files=='mp4'){
                $video = Wxserver::videos($file);
                return $video;
            }else{
                $res = Wxserver::alyImg($file);
                return $res;
            }
    
        }
    
    
    
     //发布朋友圈
        public function friend_list(Request $request)
        {
            $data = $request->except('token');
    
           
            //然后图片做拼接处理
            $data['allValue']['img'] = implode(',',$data['allValue']['img']);
    
            $data['allValue']['l_id'] = implode(',',$data['labels']);
            unset($data['labels']);
    
            Friend_list::create($data['allValue']);
            return  ['code'=>'200','msg'=>'发布成功','data'=>''];
        }

    阿里云图片存储

    //阿里云文件存储
        public static  function  alyImg($filePath)
        {
            $accessKeyId = "LTAI5t89a2M3qLbimbpYTtAz";
            $accessKeySecret = "QrQueYS6bL0Yqic10R9WTtNwcgUyHK";
        // Endpoint以杭州为例,其它Region请按实际情况填写。
            $endpoint = "http://oss-cn-shanghai.aliyuncs.com";
        // 设置存储空间名称。
            $bucket= "zxyyxz";
            $object =  time().rand(1,999999).'.png';
            try{
                $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
    
                $path = $ossClient->uploadFile($bucket, $object, $filePath);
            } catch(OssException $e) {
                printf(__FUNCTION__ . ": FAILED\n");
                printf($e->getMessage() . "\n");
                return;
            }
            return 'http://www.1902.zxyxh.com'.$object;
        }

    阿里云视频存储

     public static function videos($path)
        {
            $accessKeyId = "LTAI5t89a2M3qLbimbpYTtAz";
            $accessKeySecret = "QrQueYS6bL0Yqic10R9WTtNwcgUyHK";
            $endpoint = "http://oss-cn-shanghai.aliyuncs.com";
            $bucket= "zxyyxz";
            $object =  time().rand(1,999999).'.mp4';
            $uploadFile = $path;
    
            /**
             *  步骤1:初始化一个分片上传事件,获取uploadId。
             */
            try {
                $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
    
                //返回uploadId。uploadId是分片上传事件的唯一标识,您可以根据uploadId发起相关的操作,如取消分片上传、查询分片上传等。
                $uploadId = $ossClient->initiateMultipartUpload($bucket, $object);
            } catch (OssException $e) {
                printf(__FUNCTION__ . ": initiateMultipartUpload FAILED\n");
                printf($e->getMessage() . "\n");
                return;
            }
    
            /*
             * 步骤2:上传分片。
             */
            $partSize = 10 * 1024 * 1024;
            $uploadFileSize = filesize($uploadFile);
            $pieces = $ossClient->generateMultiuploadParts($uploadFileSize, $partSize);
            $responseUploadPart = array();
            $uploadPosition = 0;
            $isCheckMd5 = true;
            foreach ($pieces as $i => $piece) {
                $fromPos = $uploadPosition + (integer)$piece[$ossClient::OSS_SEEK_TO];
                $toPos = (integer)$piece[$ossClient::OSS_LENGTH] + $fromPos - 1;
                $upOptions = array(
                    // 上传文件。
                    $ossClient::OSS_FILE_UPLOAD => $uploadFile,
                    // 设置分片号。
                    $ossClient::OSS_PART_NUM => ($i + 1),
                    // 指定分片上传起始位置。
                    $ossClient::OSS_SEEK_TO => $fromPos,
                    // 指定文件长度。
                    $ossClient::OSS_LENGTH => $toPos - $fromPos + 1,
                    // 是否开启MD5校验,true为开启。
                    $ossClient::OSS_CHECK_MD5 => $isCheckMd5,
                );
                // 开启MD5校验。
                if ($isCheckMd5) {
                    $contentMd5 = OssUtil::getMd5SumForFile($uploadFile, $fromPos, $toPos);
                    $upOptions[$ossClient::OSS_CONTENT_MD5] = $contentMd5;
                }
                try {
                    // 上传分片。
                    $responseUploadPart[] = $ossClient->uploadPart($bucket, $object, $uploadId, $upOptions);
                } catch (OssException $e) {
                    printf(__FUNCTION__ . ": initiateMultipartUpload, uploadPart - part#{$i} FAILED\n");
                    printf($e->getMessage() . "\n");
                    return;
                }
    
            }
    // $uploadParts是由每个分片的ETag和分片号(PartNumber)组成的数组。
            $uploadParts = array();
            foreach ($responseUploadPart as $i => $eTag) {
                $uploadParts[] = array(
                    'PartNumber' => ($i + 1),
                    'ETag' => $eTag,
                );
            }
            /**
             * 步骤3:完成上传。
             */
            try {
                // 执行completeMultipartUpload操作时,需要提供所有有效的$uploadParts。OSS收到提交的$uploadParts后,会逐一验证每个分片的有效性。当所有的数据分片验证通过后,OSS将把这些分片组合成一个完整的文件。
               $pathVideo =  $ossClient->completeMultipartUpload($bucket, $object, $uploadId, $uploadParts);
            } catch (OssException $e) {
                printf(__FUNCTION__ . ": completeMultipartUpload FAILED\n");
                printf($e->getMessage() . "\n");
                return;
            }
            return 'http://www.1902.zxyxh.com'.$object;
        }
    

    更多相关内容
  • 本文实例讲述了微信小程序表单验证功能。分享给大家供大家参考,具体如下: Wxml <form bindsubmit="formSubmit" bindreset="formReset"> <input name="name" class="{{whoClass=='name'?'...
  • 微信小程序 表单Form实例 表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的”switch”,”input”,”checkbox”,”slider”,...
  • 主要为大家详细介绍了微信小程序表单验证form提交错误提示效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序表单组件没有自带的验证功能,因此开发小程序的表单验证时候一般利用官方社区开发的WxValidate插件自己进行表单验证。压缩包中有两个文件,一个是使用说明,一个是js。
  • 微信小程序表单验证,点击确认发布不能为空错误提示,具体内容如下 以下是效果图: 代码如下: WXML: <view class=ad_popError wx:if={{popErrorMsg}}>{{popErrorMsg}} <form bindsubmit=goDetail > &...
  • 如果要问微信小程序最难实现的公共业务是什么?应该是表单校验,没有之一。原因如下: 表单组件在数量上达到11个,居各类组件之首。当然幸运的是,并不是所有的都需要校验。 而这些组件操作方式多样,可分为滑动、...
  • 如果要问微信小程序最难实现的公共业务是什么?应该是表单校验,没有之一。原因如下: 表单组件在数量上达到11个,居各类组件之首。当然幸运的是,并不是所有的都需要校验。 而这些组件操作方式多样,可分为滑动、...
  • 开发中有时候会碰到需要一个表单弹窗来处理数据的提交处理,然后这次发布的这套源码就是解决这个问题! WXML代码如何: <!--button--> <view class=btn bindtap=powerDrawer data-statu=open>button</view> ...
  • 表单,将组件内的用户输入的<switch> <input/> <checkbox> <slider> <radio> <picker> 提交。 当点击<form/>表单中 formType 为 submit 的<button/>组件时,会将表单组件中的 value 值进行提交,...
  • 微信小程序表单

    千次阅读 多人点赞 2020-09-07 18:13:15
    微信小程序表单 跟朋友做了一个量衣定制的小程序页面,做了主要是采集用户的身体数据,分享给大家,复制代码过去即可使用! 效果: 代码: wxml: <view class='baseInfo'> <text>基本信息</text&...

    微信小程序表单

    跟朋友做了一个量衣定制的小程序页面,做了主要是采集用户的身体数据,分享给大家,复制代码过去即可使用!
    效果:

    在这里插入图片描述
    在这里插入图片描述
    代码:
    wxml:

    
    <view class='baseInfo'>
      <text>基本信息</text>
    </view>
     
    
     
    <form bindsubmit="formSubmit">
    <view class='list'>
      <view class='name'>
        <text>姓名</text>
        <input name="name" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的姓名'></input>
      </view>
     
      <view class='sex'>
        <text>性别</text>
        <radio-group class="radio-group" bindchange="radioChange">
          <label class="radio" wx:for="{{sex}}" wx:key="index">
            <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
          </label>
        </radio-group>
      </view>
    
        <view class='phone'>
        <text>年龄()</text>
        <input name="nl" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的年龄'></input>
      </view>
     
      <view class='phone'>
        <text>身高(CM)</text>
        <input name="sg" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你身高'></input>
      </view>
    
      <view class='phone'>
        <text>体重(KG)</text>
        <input name="tz" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的体重'></input>
      </view>
    
    
    
    
    
    <view class='baseInfo'>
      <text>身体信息</text>
    </view>
    
    <view class='baseInfo'>
      <text>上身:</text>
    </view>
    
      <view class='phone'>
        <text>领围(CM)</text>
        <input name="lw" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的领围(CM)'></input>
      </view>
    
        <view class='phone'>
        <text>肩宽(CM)</text>
        <input name="jk" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的肩宽(CM)'></input>
      </view>
    
        <view class='phone'>
        <text>胸围(CM)</text>
        <input name="xw" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的胸围(CM)'></input>
      </view>
    
        <view class='phone'>
        <text>中腰(CM)</text>
        <input name="zy" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的中腰(CM)'></input>
      </view>
    
        <view class='phone'>
        <text>袖长(CM)</text>
        <input name="xc" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的袖长(CM)'></input>
      </view>
    
    
    
    
    <view class='baseInfo'>
      <text>下身:</text>
    </view>
    
      <view class='phone'>
        <text>腰围(CM)</text>
        <input name="yw" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的腰围(CM)'></input>
      </view>
    
        <view class='phone'>
        <text>臀围(CM)</text>
        <input name="tw" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的臀围(CM)'></input>
      </view>
    
        <view class='phone'>
        <text>横档(CM)</text>
        <input name="hd" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的横档(CM)'></input>
      </view>
    
        <view class='phone'>
        <text>裤长(CM)</text>
        <input name="kc" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的裤长(CM)'></input>
      </view>
    
    
    
    </view>
     
    
    
    <button form-type='submit'>保存</button>
    </form>
    
    
    
    
    
    
    
    
    
    
    
    <!-- 模态框 -->
    <modal class="modal" title='要保存的信息' hidden="{{modalHidden}}" bindcancel='modalCancel' bindconfirm='modalConfirm'>
        <view>姓名:{{information.name}}</view>
        <view>姓别:{{userSex}}</view>
        <view>年龄:{{information.nl}}</view>
        <view>身高:{{information.sg}}</view>
        <view>体重:{{information.tz}}</view>
    </modal>
    <!-- /模态框 -->
    
    

    wxss:

    page{
      background: #eee;
    }
    .baseInfo{
      padding:20rpx 10rpx;
    }
    
    .baseInfo text{
      font-size: 28rpx;
      color: #6f6f6f;
    }
    
    
    
    .list{
      color: #6f6f6f;
      font-size: 32rpx;
    }
    
     
    .name,.sex,.phone,.info{
      background: #fff;
      display: flex;
      justify-content: space-between;
      align-content: center;
      align-items: center;
      padding: 20rpx;
      border-bottom: 1rpx solid #eee;
    }
    .name input,.phone input,.info input{
      text-align:right;
    }
    
    .sex{
      background: #fff;
    }
    
    
    .radio radio{
      margin-left: 30rpx;
    }
     
    button{
      background-color: #FE6702;
      color: #fff;
    
     
      width: 100%;
    }
     
    
    
    .modal view{
      text-align: center;
    }
    
    

    js:

    Page({
     
      /**
       * 页面的初始数据
       */
      data: {
        touxiang: 'https://manager.diandianxc.com/diandianxc/mrtx.png',
        icon_r: 'https://manager.diandianxc.com/mine/enter.png',
        sex:[
          {name:'0',value:'男',checked:'true'},
          {name:'1',value:'女'}
        ],
        isSex:"0",
        information:[],
        userSex:'',
        modalHidden:true
      },
      //单选按钮发生变化
      radioChange(e){
        console.log(e.detail.value);
        var sexName=this.data.isSex
        this.setData({
          isSex:e.detail.value
        })
      },
     
    
    
    
    
    
    
    
      //表单提交
      formSubmit(e){
        console.log(e.detail.value);
    
    
    
    
        
        var userSex=this.data.isSex==0?'男':'女';
        var information= e.detail.value;
        console.log(userSex);
    
    
        this.setData({
          information: e.detail.value,
          userSex,
          modalHidden:false
        });
    
    
      },
     
    
      
      //模态框取消
      modalCancel(){
        wx.showToast({
          title: '取消提交',
          icon:'none'
        })
        this.setData({
          modalHidden:true,
        })
      },
    
    
      //模态框确定
      modalConfirm:function(e) {
        this.setData({
          
        })
    
    
    
        wx.showToast({
          title: '提交成功',
          icon:'success'
        })
        this.setData({
          modalHidden: true
        })
      },
    
    
    
      onLoad: function (options) {
    
      }
    })
    
    
    展开全文
  • 主要介绍了微信小程序表单验证插件WxValidate的二次封装功能(终极版),文中给大家提到了最终版与前面2版的不同点,需要的朋友可以参考下
  • 本文实例讲述了微信小程序简单实现form表单获取输入数据功能。分享给大家供大家参考,具体如下: 1、效果展示 2、关键代码 index.wxml <form bindsubmit="formBindsubmit" bindreset="formReset"> 用户名...
  • 微信小程序中form 表单提交和取值实例详解 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput=”onUsernameInput” />,那么可以在 onUsernameInput 中直接使用 e.detail.value,即: ...
  • 微信小程序源码(含截图)小程序页面生成器1111微信小程序源码(含截图)小程序页面生成器1111微信小程序源码(含截图)小程序页面生成器1111微信小程序源码(含截图)小程序页面生成器1111微信小程序源码(含截图)...
  • 最近有人问我提交表单后怎么把输入框的内容清空了。  这种方法不止一种, 1、可以用表单的重置功能。 按钮设置:   formType="reset">提交 form设置:   bindreset="formReset"> 表单重置时会触发reset事件,在...
  • 日常开发中,有许多表单处理,一直写这些Form比较消耗时间,可以试试用这个表单控件,节约时间。【提供控件,需要问这能干嘛的业务问题的人,不要下载】使用方法搜搜 族谱聚 微信小程序 表单控件
  • 简易表单wxml界面代码与界面效果 文本框样式: 点击多列选择器,代码与效果如下: 多列选择器js代码:

    简易表单wxml界面代码与界面效果

    文本框样式:

    点击多列选择器,代码与效果如下:

     

     

    多列选择器js代码:

     

    展开全文
  • 主要介绍了微信小程序-form表单提交,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 效果图GIF git地址:WxValidate 使用 import WxValidate from '../../utils/WxValidate'; Page({ data: { basicInfo: { tel: '', post: '', weChat: '', specialPlane: '', email: '', ... cons
  • 主要为大家详细介绍了微信小程序实现form表单本地储存数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • wxSmartApp 本项目主要展示微信小程序中组件以及微信api的使用示例,关于微信项目环境的搭建以及各目录结构创建请参考小程序基础教程https://mp.weixin.qq.com/debug/wxadoc/dev/
  • 微信小程序表单验证方式

    千次阅读 2022-04-14 18:13:06
    微信小程序上没有自带表单验证,为了实现和vue的组件库类似于的表单验证,这个时候我们就需要借鉴一个文件WxValidate表单验证的js插件,以下只是做个列子,需要更多验证请往官网文档查看 插件下载地址及官方文档:...

    因微信小程序上没有自带表单验证,为了实现和vue的组件库类似于的表单验证,这个时候我们就需要借鉴一个文件WxValidate表单验证的js插件,以下只是做个列子,需要更多验证请往官网文档查看

    插件下载地址及官方文档:https://github.com/skyvow/wx-extend

    具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js 

    1.文件的复制 首先要把WxValidate.js复制到微信小程序中的utilts

    2.再自己需要的地方引入

    3.那么接下来的步骤相对来说比较复杂了,接下来我们需要配置一下相对于rules规则

    第一,我们先要再小程序的data属性里面配置好表单的名字

     第二,再wxml的时候 input框里面的value值一定要和js里面的声明的对应上,input的name值也是一样

     第三,回到js文件中,再小程序的onLoad声明验证规则的函数,一定要再这里声明

    第四,再onLoad后再配置验证错误的信息

    第五,配置好了错误调用信息之后我们接着配置验证的规则,注意,这里一定要实例化,因太长直接写片段

    initValidate() {
    
            const rules = {
    
                nickName: {
    
                    required: true,
    
                    minlength: 2
    
                }
    
            }
    
            const messages = {
    
                nickName: {
    
                    required: '请填写姓名',
    
                    minlength: '请输入正确的名称'
    
                }
    
            }
    
            this.WxValidate = new WxValidate(rules, messages)
    
        },

     第六,接下来最后一步,都配置好了之后,我们需要提交表单,这里的form的回调函数名字要和以下的配置一样

     然后再回到js文件的后面接着配置

    formSubmit: function (e) {
            console.log(e)
            console.log('form发生了submit事件,携带的数据为:', e.detail.value)
            const params = e.detail.value
            //校验表单
            if (!this.WxValidate.checkForm(params)) {
                const error = this.WxValidate.errorList[0]
                this.showModal(error)
                return false
            } else {
                wx.setStorageSync('key', params)
                // 这里继续写 如果这边的话请求返回的是错误信息 那么再进行多一层的判断
                setTimeout(() => {
                    wx.navigateTo({
                        url: "../itemlianxi/itemlianxi",
                    })
                }, 2000)
            }
            this.showModal({
                msg: '成功发送'
            })
        }

     最后就完成啦

     

     

    展开全文
  • 主要介绍了微信小程序学习笔记之表单提交与PHP后台数据交互处理,结合实例形式详细分析了微信小程序前台数据form表单提交及后台使用php进行处理相关操作技巧,并配以图文形式详细说明,需要的朋友可以参考下
  • 微信小程序表单post提交数据

    千次阅读 2021-12-02 15:09:39
    微信小程序post提交数据
  • 口说无凭,实现效果如下 前端 部分  注册功能 1、wxml文件 <view class=u
  • 微信小程序基础预热一、学习记录二、案例整理2.1 view 标签和 text 标签简单实用2.2 插值表达式简单使用2.3 wx:if 条件渲染 (类比 vue 中的 v-if v-show)2.4 wx:for 循环迭代2.5 综合小练习:九九乘法表三、总结3.1 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,083
精华内容 8,033
关键字:

微信小程序表单

微信小程序 订阅