热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序干货

1.获取text文本框输入的信息wxml代码<view><viewclassweui-cellweui-c

1.获取text文本框输入的信息

  wxml代码

 

<view class="weui-cells">
  <view class="weui-cell weui-cell_input">
    <view class="weui-cell__bd">
      <input class="weui-input" bindinput="changepapertitle" maxlength="100" placeholder="请输入问卷标题(最多100个字)" value='{{papertitle}}' />
    view>
  view>
view>

 

 

 

 后端js

 

划重点:通过bindinput事件,在后端能够获取到输入值

 

2.获取同一个控件的多个属性

wxml代码

<input type='text' style='width:200px' bindinput="ratiotxtchange"  data-qid='{{item.qid}}'  id="{{dqdata.dqid}}"  placeholder='其他'>input>

js代码

 

//单选其他选项输入
  ratiotxtchange:function(e){
    debugger;
    var id = e.currentTarget.id; //选项ID
    var qid = e.currentTarget.dataset.qid;//问题ID
    var value = e.detail.value; //单选框的值
    this.data.radtxts[qid] =id+"|"+ value;
    this.data.tschecks["A"+qid] = id + "|" + value;//存入特殊选项的ID

  }

 

划重点:前端通过设置data-xx的信息,后端用

e.currentTarget.dataset.xx 获取其中的值,
此方法可以获取同一个控件的多个属性,对处理某些复杂点的逻辑,比较有用

3.微信小程序AJAX请求
    wx.request({
      url: posturl + "/Form/AddAnswerPaper",
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        "paperid": paperid, //问卷ID
        "openid": getApp().globalData.openid, //当前登录人
        "rich": JSON.stringify(rich),
        "txts": JSON.stringify(txts),
        "redio": JSON.stringify(rads),
        "checks": JSON.stringify(checks),
        "img": JSON.stringify(imgs),
        "addresses": JSON.stringify(addresses),

      },
      success: function (rdata) {
        if (rdata.data.result == true) {

          that.setData({
            modalHidden: !that.data.modalHidden
          })
         
        } else {
          wx.showToast({
            title: "保存失败",
            icon: 'loading',
            duration: 3000
          })
        }
      }
    })
 

4.后端获取微信小程序openid

 
        /// 
        /// 获取微信用户OPENID
        /// 
        /// 
        public string QueryOpenId()
        {
            seesionmodel m = new seesionmodel();
            try
            {
                string code = Request["code"];
                string Appid = ConfigurationSettings.AppSettings["Appid"];
                string AppSecret = ConfigurationSettings.AppSettings["AppSecret"];
                string html = string.Empty;
                string url = "https://api.weixin.qq.com/sns/jscode2session?appid=" + Appid + "&secret=" + AppSecret + "&js_code=" + code + "&grant_type=authorization_code";
                HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(url);
                request.Method = "GET";
                HttpWebResponse response = request.GetResponse() as HttpWebResponse;
                Stream ioStream = response.GetResponseStream();
                StreamReader sr = new StreamReader(ioStream, Encoding.UTF8);
                html = sr.ReadToEnd();
                sr.Close();
                ioStream.Close();
                response.Close();
                m = JsonConvert.DeserializeObject(html);
                return m.openid;
            }
            catch (Exception ex)
            {
                logger.Debug(ex.Message);
                m.openid = "获取OpenID失败";
            }
          
            return JsonConvert.SerializeObject(m);


        }
 
    public class seesionmodel
    {
        public string session_key { get; set; }
        public string expires_in { get; set; }
        public string openid { get; set; }
    }

 通过后端获取微信用户唯一的ID,一是提高安全性,二是可以避免授权弹框。

 

5.微信小程序弹出可输入的对话框

 

实例:点击红线,弹出可输入对话框,然后保存。

 


 文本框部分代码:
   
<view class="p">
      <view bindtap='namechange' style='width:120px;margin:0 auto'>
        <input type='text' class='txtname' value='{{RealName2}}' disabled='disabled' placeholder='请输入您的姓名' />
      view>
 view>


弹出框部分代码:

<modal hidden="{{hiddenmodalput}}" title="请输入" confirm-text="提交" bindcancel="cancel" bindconfirm="confirm">
    <input type='text' bindinput='nameinput' value='{{RealName}}'  class='txtname' placeholder="请输入您的名字" auto-focus/>
modal>
 
var posturl = getApp().globalData.posturl;
Page({
  data: {
    IcreateNum: 0,
    IJoinNum: 0,
    nickName:"",
    hiddenmodalput:true,
    RealName:"",
    RealName2: ""
  },
  onLoad: function(options) {
    var realname= wx.getStorageSync('RealName');
    if(realname!=""){
      this.setData({
        RealName2: realname
      })
      console.log("从缓存读取姓名");
    }else{
      var openid = getApp().globalData.openid;
      var that=this;
      console.log("从数据库读取姓名");
      wx.request({
        url: posturl + "/Form/QueryRealNameByOpenId", //自己的服务接口地址  
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {

          "OpenID": openid
        },
        success: function (data) {
          that.setData({
            RealName2: data.data,

          });
          wx.setStorageSync('RealName', data.data);

        }
      });
    }
  },
  //单击名字
  namechange:function(e){
    console.log("444");
    var RealName2 = this.data.RealName2;
    this.setData({
      hiddenmodalput: false,
      RealName: RealName2
    })
  },
  cancel:function(e){
    this.setData({
      hiddenmodalput: true
    })
  },
  //获取姓名
  nameinput:function(e){
    let name = e.detail.value;
    console.log(name);
    this.setData({
      RealName: name
    })
  },
  //提交姓名
  confirm:function(e){
    var Name = this.data.RealName;
    var openid = getApp().globalData.openid; //唯一标识
    var RealName = this.data.RealName;

    var that=this;
    wx.request({
      url: posturl + "/Form/UpdateRealNameByOpenId", //自己的服务接口地址  
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        "RealName": RealName,
        "OpenID": openid
      },
      success: function (data) {
        if (data.data.result == true) {

          that.setData({
            hiddenmodalput:true,
            RealName2:RealName
          });
          wx.setStorageSync('RealName', RealName);
        } else {
          wx.showModal({
            title: '错误提示',
            content: '修改姓名失败',
            showCancel: false,
            success: function (res) { }
          })
        }


      }
    });

  },
  onReady: function() {

      
  },
  onShow: function() {
    // 页面显示
    // 页面初始化 options为页面跳转所带来的参数
    this.queryNumIcreate();
    this.queryNumIJoin();
  },
  onHide: function() {
    // 页面隐藏
  },
  onUnload: function() {
    // 页面关闭
  },
  
  userNickNameclick:function(){
    console.log("3333");
  }
})

6.微信小程序上传图片

 

wxml

      <view class="uploader-text" bindtap="chooseImage2">添加图片view>

js

chooseImage2: function (e) {
    var that = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      count: 1, // 最多可以选择的图片张数
      success: function (res) {


        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片  
        var tempFilePaths = res.tempFilePaths;
        //启动上传等待中...  
        wx.showToast({
          title: '正在上传...',
          icon: 'loading',
          mask: true,
          duration: 10000
        })

        wx.uploadFile({
          url: posturl + '/Form/uploadfilenew',
          filePath: tempFilePaths[0],
          name: 'uploadfile_ant',
          formData: {
            'imgIndex': 0
          },
          header: {
            "Content-Type": "multipart/form-data"
          },
          success: function (res) {

            tempFilePaths = [];
            var saveurl = posturl + JSON.parse(res.data).Url.replace("..", "");
            tempFilePaths.push(saveurl);
            that.setData({
              files2: [],
            });
            // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
            that.setData({

              files2: that.data.files2.concat(tempFilePaths)
            });

            wx.hideToast();
          },
          fail: function (res) {
            wx.hideToast();
            wx.showModal({
              title: '错误提示',
              content: '上传图片失败',
              showCancel: false,
              success: function (res) { }
            })
          }
        });


      }
    })
  },

 

 c#

  /// 
        /// 上传文件、图片
        /// 
        /// 
        public ContentResult UploadFileNew()
        {
            UploadFileDTO model = new UploadFileDTO();
            try
            {
                HttpPostedFileBase file = Request.Files["uploadfile_ant"];
                if (file != null)
                {
                    //公司编号+上传日期文件主目录  
                    model.Catalog = DateTime.Now.ToString("yyyyMMdd");
                    model.ImgIndex = Convert.ToInt32(Request.Form["imgIndex"]);

                    //获取文件后缀  
                    string extensiOnName= System.IO.Path.GetExtension(file.FileName);

                    //文件名  
                    model.FileName = System.Guid.NewGuid().ToString("N") + extensionName;

                    //保存文件路径  
                    string filePathName = Server.MapPath("~/images/") + model.Catalog;
                    if (!System.IO.Directory.Exists(filePathName))
                    {
                        System.IO.Directory.CreateDirectory(filePathName);
                    }
                    //相对路径  
                    string relativeUrl = "../images";
                    file.SaveAs(System.IO.Path.Combine(filePathName, model.FileName));

                    //获取临时文件相对完整路径  
                    model.Url = System.IO.Path.Combine(relativeUrl, model.Catalog, model.FileName).Replace("\\", "/");
                }

            }
            catch (Exception ex)
            {
                logger.Error(ex.Message);
            }
            return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model));
        }

6.微信小程序点击图片预览

 wxml

   <image wx:if='{{DescribeImg!=""&&DescribeImg!=null}}' style='width:400rpx;height:400rpx' src='{{DescribeImg}}' bindtap='previewImg'>image> 

js

//图片放大
  previewImg: function (e) {

    var img = this.data.DescribeImg;//图片网址
    var ary = new Array();
    ary.push(img);
    wx.previewImage({
      current: ary[0],     //当前图片地址
      urls: ary,//路径集合,必须是数组
      success: function (res) { },
      fail: function (res) { },
      complete: function (res) { },
    })
  }

 


推荐阅读
  • 校园表白墙微信小程序,校园小情书、告白墙、论坛,大学表白墙搭建教程
    小程序的名字必须和你微信注册的名称一模一样在后台注册好小程序。mp.wx-union.cn后台域名https。mp.wx-union.cn ... [详细]
  • 微信小程序实战之菜谱小程序
    最近突发奇想,想要自己搞个小程序玩儿玩儿,但是鉴于自己是搞后端服务器出身,对于偏前端的微信小程序开发实在是一知半解,尤其是对于css类样式相关,更是无从下手,于是乎,只能从晚上找了 ... [详细]
  • 微信小程序实现简易计算器功能_javascript技巧
    这篇文章主要为大家详细介绍了微信小程序实现简易计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的 ... [详细]
  • 本文讨论了在openwrt-17.01版本中,mt7628设备上初始化启动时eth0的mac地址总是随机生成的问题。每次随机生成的eth0的mac地址都会写到/sys/class/net/eth0/address目录下,而openwrt-17.01原版的SDK会根据随机生成的eth0的mac地址再生成eth0.1、eth0.2等,生成后的mac地址会保存在/etc/config/network下。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • python限制递归次数(python最大公约数递归)
    本文目录一览:1、python为什么要进行递归限制 ... [详细]
  • 微信民众号商城/小顺序商城开源项目介绍及使用教程
    本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目,包括前端和后端的目录结构,以及所使用的技术栈。同时提供了项目的运行和打包方法,并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接,以及加入前端交流QQ群的方式。 ... [详细]
  • 起因由于我录制过一个小程序的课程,里面有消息模板的讲解。最近有几位同学反馈官方要取消消息模板,使用订阅消息。为了方便大家容易学 PythonFlask构建微信小程序订餐系统 课程。 ... [详细]
  • 微信小程序中如何实现轮播图
    这篇文章主要介绍了微信小程序中如何实现轮播图,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带 ... [详细]
  • 微信小程序地图实现展示线路的方法
    这篇文章将为大家详细讲解有关微信小程序地图实现展示线路的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所 ... [详细]
  • 微信小程序学习笔记-3-问题
    一些在开发微信小程序中常见的问题页面渲染  微信小程序中规定所有页面上渲染出来的数据,包括文字和图片皆包含在在每个页面文件夹中的js文件中的page这个内置函数的参数data中, ... [详细]
  • 今天就跟大家聊聊有关怎么在微信小程序中监听全局变量,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇 ... [详细]
  • 微信小程序如何实现列表的横向滑动
    小编这次要给大家分享的是微信小程序如何实现列表的横向滑动,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所 ... [详细]
  • 本文介绍了PE文件结构中的导出表的解析方法,包括获取区段头表、遍历查找所在的区段等步骤。通过该方法可以准确地解析PE文件中的导出表信息。 ... [详细]
  • ZABBIX 3.0 配置监控NGINX性能【OK】
    1.在agent端查看配置:nginx-V查看编辑时是否加入状态监控模块:--with-http_stub_status_module--with-http_gzip_stat ... [详细]
author-avatar
ryan__bug
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有