美文网首页
9月24日知识点记录

9月24日知识点记录

作者: 默言1024 | 来源:发表于2017-09-26 08:12 被阅读0次

一.微信获取收获地址

if(wx.chooseAddress){
 wx.chooseAddress({
  success: function (res) {
   console.log(JSON.stringify(res))
  },
  fail: function(err){
   console.log(JSON.stringify(err))
  }
 })
}else{
 console.log('当前微信版本不支持chooseAddress');
}

二.验证，上传图片，跳转小程序

var config = require('../../config.js');
Page({
  data: {
    imgUrls: [
      config.remote_img_uri + '1.jpg',
      config.remote_img_uri + '2.jpg',
      config.remote_img_uri + '3.jpg',
      config.remote_img_uri + '4.jpg',
      config.remote_img_uri + '5.jpg',
      config.remote_img_uri + '6.jpg',
      config.remote_img_uri + '7.jpg',
      config.remote_img_uri + 'fm1.jpg',
      config.remote_img_uri + 'fm2.jpg'
    ],
    videoUrls: [
      config.remote_video_uri + 'bd-jtjy.mp4',
      config.remote_video_uri + 'xyfx-jtyj.mp4'
    ],
    img: config.remote_img_uri,
    video: config.remote_video_uri
  },
  // 转入
  onLoad: function () {
  },
  // 打电话
  callMe: function (e) {
    wx.makePhoneCall({
      phoneNumber: '03543060680'
    })
  },
  // 转发
  onShareAppMessage: function () {
    return {
      title: '教育部家庭教育指导师报名',
      path: '/pages/video/video',
      success: function (res) {
        // 转发成功
        // console.log('success', '<<<' + res + '>>>');
      },
      fail: function (res) {
        // 转发失败
        // console.log('error', '<<<' + res + '>>>');
      }
    }
  },
  // 图片预览
  imagePrivew: function (e) {
    var nowImg = config.remote_img_uri + e.target.id;
    // console.log(e, nowImg, this.data.imgUrls);
    wx.previewImage({
      urls: this.data.imgUrls,
      current: nowImg
    })
  },
  //跳转小程序
  onjumpzixun: function (e) {
    wx.navigateToMiniProgram({
      appId: '',
    })
  },
  onjumpxinli: function (e) {
    wx.navigateToMiniProgram({
      appId: '',
    })
  },
  // 跳转教材  
  bindBook: function () {
    navigate('wxf326ae804d2dd5fa',
      'pages/orderbook/orderbook');
  },
  // 跳转报名
  bindReg: function () {
    navigate('wxf326ae804d2dd5fa',
      'pages/index/index');
  },
  // 跳转视频课程
  bindVideo: function () {
    navigate(
      'wx674a5b329cbb70ac',
      'pages/index/index');
  }
})

三.未知方法

 //app.js
const config = require('config');
const md5 = require('utils/md5');
const util = require('utils/util');
import wxValidate from 'utils/wxValidate';

/**
 *  对参数签名 
 * */
function checkInParam(param) {
  var str_param = '';
  // 参数数组
  var paramObj = {};

  if (typeof param == "object") {
    var param_keys = Object.keys(param);
    if (param_keys == "") return false;

var sort_params = param_keys.sort();
for (var i in sort_params) {
  // 参数拼接
  str_param += sort_params[i] + '=' + param[sort_params[i]] + '&';
}

str_param = str_param.substr(0, str_param.length - 1);

// 加入参数数组
paramObj = param;
  }
  var time = util.formatTime(new Date());
  var signature = md5(str_param + time + config.key);
  // console.log(str_param, signature);

  paramObj.app = config.app;
  paramObj.signature = signature;
  paramObj.time = time;
  paramObj.version = config.version;

  return paramObj;
}
/**
 * 解参数
 * --------
 * 转换前：
 * a=1&b=2
 * 
 * 转换后：
 * {
 *  a : 1,
 *  b : 2
 * }
 */
function decodeParam(str_param) {
  var param = {};
  var sp = str_param.split('&');
  for (var i in sp) {
    var pop = sp[i].split('=');
    param[pop[0]] = pop[1];
  }
  return param;
}
/**
 * 远程请求
 */
function request(req) {
  wx.showLoading({
    title: '加载中...',
  })
  var url = req.url ? config.remote_uri + req.url : '';
  var method = req.method ? req.method : 'POST';
  var data = req.data ? req.data : '';
  var param = checkInParam(data);
  // console.log(data, param);
  wx.request({
    url: url,
    method: method,
    data: param,
    dataType: 'json',
    header: {
      'content-type': 'application/json'
    },
    success: function (res) {
      // console.log('success >>> ', res)
      typeof req.success == "function" && req.success(res)
    },
    fail: function (e) {
      // console.log('fail >>> ', e)
      typeof req.fail == "function" && req.fail(e)
    },
    complete: function () {
      wx.hideLoading();
    }
  })
}
App({
  WxValidate: (rules, messages) => new wxValidate(rules, messages),
  onLaunch: function () {
  },
  getUserInfo: function (cb) {
    var that = this
    if (this.globalData.userInfo) {
      typeof cb == "function" && cb(this.globalData.userInfo)
    } else {
      //调用登录接口
      wx.login({
       success: function (loginData) {
          // console.log('in WX-Login success', loginData);
          // 获取用户信息
          wx.getUserInfo({
        withCredentials: true,
        success: function (res) {
          // console.log('in WX-GetUserInfo success', res.userInfo);

          // 服务器端获取用户openid
          var info = res.userInfo;
          info['code'] = loginData.code;
          if (loginData.code) {
            // console.log('已发起网络请求');
            //发起网络请求
            request({
              url: '/login',
              data: info,
              success: function (loginRes) {
                // console.log(loginRes);
                if (loginRes.data.status !== 200) return false;

                try {
                  wx.setStorageSync('guid', loginRes.data.guid);
                } catch (e) {
                  // console.log('setStoageSync GUID Error :', e);
                }
              }
            })
          } else {
            // console.log('获取用户登录态失败！' + loginData.errMsg)
          }
          // 回调
          that.globalData.userInfo = res.userInfo
             typeof cb == "function" && cb(res.userInfo)
            },
            fail: function (e) {
          wx.openSetting({
            success: function (data) {
              if (data.authSetting["scope.userInfo"] == true) {
                wx.getUserInfo({
                  withCredentials: true,
                  success: function (res) {
                    // console.log('in openSetting WX-GetUserInfo success', res.userInfo);

                    // 服务器端获取用户openid
                    var info = res.userInfo;
                    info['code'] = loginData.code;
                    if (loginData.code) {
                      // console.log('已发起网络请求');
                      //发起网络请求
                      request({
                        url: '/login',
                        data: info,
                        success: function (loginRes) {
                          // console.log(loginRes);
                          if (loginRes.data.status !== 200) return false;

                          try {
                            wx.setStorageSync('guid', loginRes.data.guid);
                          } catch (e) {
                            // console.log('setStoageSync GUID Error :', e);
                          }
                        }
                      })
                    } else {
                      // console.log('获取用户登录态失败！' + loginData.errMsg)
                    }
                        that.globalData.userInfo = res.userInfo
                        typeof cb == "function" && cb(res.userInfo)
                      },
                      fail: function (res) {
                        // console.log('in openSetting WX-GetUserInfo fail', res);
                      }
                    });
                  }
                },
                fail: function (e) {
                  // console.log('in openSetting fail', e);
                }
              });
              // console.log('in WX-GetUserInfo fail', e);
            }
          })
        }
      })
    }
  },
  globalData: {
    userInfo: null
  },
  // 分享
  share: function () {
    // 转发
    return {
      title: '心理咨询师全国代报名',
      path: '/pages/index/index',
      success: function (res) {
        // 转发成功
    // console.log('success', '<<<' + res + '>>>');
      },
      fail: function (res) {
        // 转发失败
        // console.log('error', '<<<' + res + '>>>');
      }
    }
  },
  // 电话
  call: function () {
    wx.makePhoneCall({
      phoneNumber: '03543060680'
    })
  },
  // 远程请求
  request: function (req) {
    request(req);
  }
})

四.图片验证并加载显示
1.页面

<view class='box'>
<view class='head'>家庭教育指导师报名表</view>
<view class='content'>
<form catchsubmit="formSubmit" bindreset='formReset' report-submit="true">
<view class="page-section page-section-gap">
<view class='style page-section-name' bindfocus='changestyle'>姓名
<text class='red_str'></text>
</view>
<input class='section_name' name="realname" type="text" />
<view class='error' hidden='{{realnameStatus}}'>{{realnameTip}}</view>
<view class="style page-section-sex">性别
<text class='red_str'></text>
<radio-group name="sex" bindchange="changesex">
<label class='radio'>
<radio class='section-sex' value="1" />男</label>
<label class='radio'>
<radio class='section-sex' value="2" checked="true" />女</label>
</radio-group>
<view class='error' hidden='{{sexStatus}}'>{{sexTip}}</view>
</view>
<view class="error-tip" hidden="{{levelStatus}}">{{levelTip}}</view>
</view>
<view class='style page-section-phone'>联系方式
<text class='red_str'></text>
</view>
<input name='phone' class='section_phone' type="number" />
<view class='error' hidden='{{phoneStatus}}'>{{phoneTip}}</view>
<view class='style page-section-image'>身份证正面
<text class='red_str'></text>
<view>
<text class='hint'>支持 jpg, png, gif, bmp, psd, tiff 等图片格式</text>
</view>
</view>
<image class='img_btn' data-id="imgOne" bindtap='getimage' src='{{ imgOne ? imgOne : plusImg }}'></image>
<input type='text' hidden='true' name='imgOne' value='{{imgOneValue}}' />
<view class='error' hidden='{{imgOneStatus}}'>{{imgOneTip}}</view>

  <view class='style page-section-image'>身份证反面
    <text class='red_str'>*</text>
    <view>
      <text class='hint'>支持 jpg, png, gif, bmp, psd, tiff 等图片格式</text>
    </view>
  </view>
  <image class='img_btn' data-id="imgTwo" bindtap='getimage' src='{{ imgTwo ? imgTwo : plusImg }}'></image>
  <input type='text' hidden='true' name='imgTwo' value='{{imgTwoValue}}' />
  <view class='error' hidden='{{imgTwoStatus}}'>{{imgTwoTip}}</view>

  <view class='style page-section-image'>最高学历毕业证
    <text class='red_str'>*</text>
    <view>
      <text class='hint'>支持 jpg, png, gif, bmp, psd, tiff 等图片格式</text>
    </view>
  </view>
  <image class='img_btn' data-id="imgThree" bindtap='getimage' src='{{ imgThree ? imgThree : plusImg }}'></image>
  <input type='text' hidden='true' name='imgThree' value='{{imgThreeValue}}' />
  <view class='error' hidden='{{imgThreeStatus}}'>{{imgThreeTip}}</view>

  <view class='style page-section-image'>二寸红底照片
    <text class='red_str'>*</text>
    <view>
      <text class='hint'>支持 jpg, png, gif, bmp, psd, tiff 等图片格式</text>
    </view>
  </view>
  <image class='img_btn' data-id='imgFour' bindtap='getimage' src='{{ imgFour ? imgFour : plusImg }}'></image>
  <input type='text' hidden='true' name='imgFour' value='{{imgFourValue}}' />
  <view class='error' hidden='{{imgFourStatus}}'>{{imgFourTip}}</view>

  <input type='text' hidden='true' name='type' value='4'></input>
  <view class="btn_area">
    <button class='sub' hidden='{{ hidden }}' form-type='submit' bindtap="setHidden">提交</button>
  </view>
</form>

</view>
</view>

二.小程序后台代码
`const config = require("../../config.js");
const qiniuUploader = require("../../utils/qiniuUploader");

// 初始化七牛相关参数
function initQiniu() {
var options = {
region: 'SCN', // 华南区
uptokenURL: 'https://51nst.yunfeng365.com/upToekn',
domain: config.remote_upload_uri,
shouldUseQiniuFileName: false
};

qiniuUploader.init(options);
}
/**

  • 设置验证字段
    */
    function setValidate(obj) {
    obj.WxValidate = app.WxValidate(
    {
    realname: {
    required: true
    },
    sex: {
    required: true
    },
    phone: {
    required: true,
    tel: true,
    digits: true,

    },
    imgOne: {
    required: true
    },
    imgTwo: {
    required: true
    },
    imgThree: {
    required: true
    },
    imgFour: {
    required: true
    },
    }, {
    realname: {
    required: '姓名不能为空',
    min: '姓名最少为二位',
    },
    sex: {
    required: '性别不能为空'
    },
    phone: {
    required: '联系方式不能为空',
    tel: '请输入正确电话号码',
    digits: '电话号为数字'
    },
    imgOne: {
    required: '图片不能为空'
    },
    imgTwo: {
    required: '图片不能为空'
    },
    imgThree: {
    required: '图片不能为空'
    },
    imgFour: {
    required: '图片不能为空'
    }
    }
    );
    }

// pages/res/res.js
var app = getApp();

Page({
/**

  • 页面的初始数据
    */
    data: {
    plusImg: '/image/plus.png',
    hidden: false
    },
    getimage: function(e){
    // 初始化七牛配置
    initQiniu();
//异步方法
var that = this;
//获取点击上传后的ID名
var obj = e.currentTarget.dataset.id;

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {

    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths
    // console.log(tempFilePaths);
    //动态获取1.定义数组存放
    // var data = {};
    //获取下标为0的文件路径
    tempFilePaths = tempFilePaths[0];
    // that.setData(data);

    // 交给七牛上传  tempFilePaths默认取0  提交成功upRes
    qiniuUploader.upload(tempFilePaths, (upRes) => {
      // console.log(upRes);
      // 修改数据
      //定义数组存放收到的文件路径
      var data = {};
      // data[nowImg] = upRes.imageURL;
      // data[nowTvalue + 'ShowLoading'] = false;
      //data[id名] = 获取到的文件路径 
      data[obj] = tempFilePaths;
      //data[ID+值] = 获取到的图片路径
      data[obj+'Value'] = upRes.imageURL;
      //设置数据data 
      that.setData(data);
    }, (error) => {
    }
    );
  }
})

},

onLoad: function (e) {
// 表单验证初始化
setValidate(this);
},

/**

  • 页面上拉触底事件的处理函数
    */
    onReachBottom: function () {

},

// 提交表单
formSubmit: function (e) {
var that = this
var meInfo = this.data.userInfo;
var requestValue = e.detail.value;
var formId = e.detail.formId;
console.log(requestValue);

// 去掉提示
var data = {};
for (var i in requestValue) {
  var status = i + 'Status';
  data[status] = true;
}
this.setData(data);

//提交错误描述
if (!this.WxValidate.checkForm(e)) {
  data = {};
  var errs = this.WxValidate.errorList;
  for (var i in errs) {
    var tip = errs[i].param + 'Tip';
    var status = errs[i].param + 'Status';
    var msg = errs[i].msg;

    data[tip] = msg;
    data[status] = false;
  }
  console.log(data);
  this.setData(data);
  return false
}

// remote request
app.request({
  url: '/bm/store',
  data: requestValue,
  success: function(res){
    console.log(res);
    if (res.statusCode == 200)
    {
      wx.showModal({
        title: '提示',
        content: res.data.msg,
      })         
      return ;
    }
    wx.showModal({
      title: '提示',
      content: '服务器繁忙请稍后',
    })
  },
  fail: function(err) {
    console.log(err);
    wx.showModal({
      title: '提示',
      content: '服务器繁忙请稍后',
    })
  }
});

},
//提交成功后按钮隐藏
setHidden: function (e) {
this.setData({
hidden: true
})
},
// 重置数据并提示
// formReset: function () {
// wx.showToast({
// title: '提交成功'
// // duration: 0,
// // mask: true,
// // success: function(res) {},
// // fail: function(res) {},
// // complete: function(res) {},
// })
// console.log('form发生了reset事件')
// }
})·
五.其他知识点总结
{
"navigationBarTitleText": "心理学兴趣班报名表"
}
提交后隐藏按钮

相关文章

  • CSS——知识点补充（一）选择器权重和长度、颜色单位

    前言 发现之前对于CSS的知识点记录的比较少，最新在重新复习CSS，所以在此对以前没有记录的知识点做一下记录。 一...

  • 《图解HTTP》读书笔记（3）

    记录方式： 主要根据目录记录主要的知识点，HTTP相关知识点书中写的很容易理解，建议阅读《图解HTTP》 Part...

  • ProGuard 混淆

    记录一下混淆的知识点

  • 《图解HTTP》读书笔记（1）

    记录方式： 主要根据目录记录主要的知识点，HTTP相关知识点书中写的很容易理解，建议阅读《图解HTTP》 1.Pa...

  • 《图解HTTP》读书笔记（2）

    记录方式： 主要根据目录记录主要的知识点，HTTP相关知识点书中写的很容易理解，建议阅读《图解HTTP》 3.Pa...

  • CopyOnWriteArrayList 源码详解和集合世界的f

    前言 记录在学习Java容器 知识点中，关于List的重点知识点。 知识点概览： 容器中的设计模式 从Arrays...

  • 知识点记录

    不同的情景需要不同的语言表达与沟通，就像不同主题的同学会需要穿不同的衣服参加一样: 尴尬的场面需要幽默 死板的场面...

  • 知识点记录

    Target->Build Phases->Link Binary With Libraries001.pngLi...

  • 知识点记录

    Ubuntu 用命令行打开当前文件夹 nautilus . find -name "*.xml" -mmin -2...

  • 知识点记录

    计算之间如何通信 局域网间通信a. 同一个子网内计算机都连接到同一个 hub 上，hub 会将收到的消息，转发给所...

网友评论

      本文标题：9月24日知识点记录

      本文链接：https://www.haomeiwen.com/subject/kqkkextx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|9月24日知识点记录|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！