微信小程序相关操作示例

这里设置方便后面访问服务器不校验域名

wxml-写页面

for指令

<image wx:for="{{imagelist}}" src="{{item}}"></image>

绑定事件

<button type="warn" bindtap="uploadimg">上传图片</button>
<button bindtap="pretectpic">开始运行</button>

数据绑定

这种花括号的形式，数据可以定义在js文件里面的data里面

<text>数据绑定</text>
<view>数据：{{message}}</view>

获取当前用户相关信息的方式

<view>当前用户名：{{name}}</view>
<view>当前头像
  <image src="{{pathurl}}" style="height:200rpx;width: 200rpx;"></image>
</view>
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>

跳转

<!-- 跳转 -->
<view bindtap="clickMe" data-nid="123" data-name="小米">跳转方式一</view>
<navigator url="/pages/bind/bind">跳转方式二</navigator>

第一种

  clickMe : function(e){
    console.log(e);
    var nid=e.currentTarget.dataset.nid;
    var name=e.currentTarget.dataset.name;
    console.log(nid);
    console.log(name);
    //跳转
    wx.navigateTo({
      url: '/pages/redirct/redirct?id='+nid+"&name="+name,
      // url: '/pages/page2/page?id='+nid+"&name="+name,无法跳转到tabbar页面
    })
  }

可以带参数data-后面的就是参数名

展示用户信息

<view>当前用户名：{{name}}</view>
<view>当前头像
  <image src="{{pathurl}}" style="height:200rpx;width: 200rpx;"></image>
</view>
<button bindtap="bindGetUserInfo">授权登录</button>
<view bindtap="getLocalPath">位置：{{localPath}}</view>

表单提交

开关样式：

<view class="section__title">是否公开信息</view>
<switch name="isPub" />

选项样式

<view class="section__title">性别</view>
<radio-group name="sex">
  <label>
    <radio value="男" checked/>男</label>
  <label>
    <radio value="女" />女</label>
</radio-group>

总览

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section__title">是否公开信息</view>
    <switch name="isPub" />
  </view>
 
  <view class="section">
    <view class="section__title">手机号</view>
    <input name="phone" placeholder="手机号" />
  </view>
  <view class="section">
    <view class="section__title">密码</view>
    <input name="pwd" placeholder="密码" password/>
  </view>
  <view class="section section_gap">
    <view class="section__title">性别</view>
    <radio-group name="sex">
      <label>
        <radio value="男" checked/>男</label>
      <label>
        <radio value="女" />女</label>
    </radio-group>
  </view>
  <view class="btn-area">
    <button formType="submit">提交</button>
    <button formType="reset">重置</button>
  </view>
</form>
<view wx:if="{{isSubmit}}">
  {{warn ? warn : "是否公开信息："+isPub+"，手机号："+phone+"，密码："+pwd+"，性别："+sex}}
</view>

键盘输入的控制

<view class="page-body">

  <view class="page-section">
    <view class="weui-cells__title">可以自动聚焦的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" auto-focus placeholder="将会获取焦点"/>
      </view>
    </view>
  </view>

  <view class="page-section">
    <view class="weui-cells__title">控制最大输入长度的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" maxlength="10" placeholder="最大输入长度为10" />
      </view>
    </view>
  </view>

  <view class="page-section">
    <view class="weui-cells__title">实时获取输入值：{{inputValue}}</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input"  maxlength="10" bindinput="bindKeyInput" placeholder="输入同步到view中"/>
      </view>
    </view>
  </view>

  <view class="page-section">
    <view class="weui-cells__title">控制输入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input"  bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
      </view>
    </view>
  </view>

  <view class="page-section">
    <view class="weui-cells__title">控制键盘的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input"  bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
      </view>
    </view>
  </view>

  <view class="page-section">
    <view class="weui-cells__title">数字输入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" type="number" placeholder="这是一个数字输入框" />
      </view>
    </view>
  </view>

  <view class="page-section">
    <view class="weui-cells__title">密码输入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" password type="text" placeholder="这是一个密码输入框" />
      </view>
    </view>
  </view>

  <view class="page-section">
    <view class="weui-cells__title">带小数点的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" type="digit" placeholder="带小数点的数字键盘"/>
      </view>
    </view>
  </view>

  <view class="page-section">
    <view class="weui-cells__title">身份证输入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" type="idcard" placeholder="身份证输入键盘" />
      </view>
    </view>
  </view>

  <view class="page-section">
    <view class="weui-cells__title">控制占位符颜色的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
      </view>
    </view>
  </view>

</view>
<view>手机号：</view>
<input  bindinput="bindPhone" placeholder="请输入手机号"/>
<view>验证码：<text>点击获取验证码</text></view>
<input  bindinput="bindCode" placeholder="请输入验证码"/>
<button bindtap="login">登录</button>

js-写方法

初始数据（字典）：

data: {
    datalist:["goods1","goods2","goods3","goods4","goods5"],
    userinfo:{name:"xiaoming",
      age:18},
    // imagelist:["/images/icon1.png","/images/icon2.png","/images/icon3.png","/images/icon1.png",]
    imagelist:"",
    imgs:""
  },

方法函数：

//自定义方法
viewimages(){
}
uploadimg:function(){
}
//默认方法
/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }

存储图片到云开发平台存储

选择图片

var that=this;
wx.chooseImage({
  count: 1,
  sizeType:["original","compressed"],
  sourceType:["album","camera"],
  success:function(res){
    const tempFilePaths=res.tempFilePaths[0];
    console.log(tempFilePaths)//这里是选择的图片的临时路径
    that.setData({imagelist:res.tempFilePaths})//重定向
    //下面可以写存储到平台的具体代码
  },fail(res){
    console.log("fail"+res);
  },complete(res){
    console.log("complete"+res);
  }
})

//存储到平台的具体代码
wx.cloud.uploadFile({
cloudPath:'storage/pic3',
 filePath:tempFilePaths
})
wx.showModal({
 cancelColor: 'cancelColor',
 title:"上传成功"
})

访问服务器的request方式

pretectpic(){
    var that =this;

    wx.request({
      //接口
      url: 'http://192.168.1.107:4000/func3',
      //传递的内容（storage/pic3是我自己存储的图片）
      data: {domin:"https://(这里是自己的云开发平台的地址)/storage/pic3"},
      method: "POST",
      success: (res) => {
        if (res.data) {
          base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(res.data));
     /// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
     const base64ImgUrl = "data:image/png;base64," + base64Data;
     /// 刷新数据
          that.setData({
             imgs : base64ImgUrl
          })
         
        } 
      }
    })
  }

获取当前用户信息

bindGetUserInfo:function(){
    // 获取用户信息
    // wx.openSetting({});
    var that=this;
    wx.getUserInfo({
      success:function(res){
        console.log(res)
        that.setData({name:res.userInfo.nickName,pathurl:res.userInfo.avatarUrl});
      },fail:function(res){
        console.log("失败");
      }
    })
  },

获取当前用户头像和名字

bindGetUserInfo:function(){
// 获取用户信息
// wx.openSetting({});
var that=this;
wx.getUserProfile({
  desc:"正在获取",
  success:function(res){
    console.log(res)
    that.setData({name:res.userInfo.nickName,pathurl:res.userInfo.avatarUrl});
  },fail:function(res){
    console.log("失败");
  }
})
},

选择位置

getLocalPath:function(){
var that =this;
 wx.chooseLocation({
   latitude: 0,
   success:function(res){
     console.log(res);
     that.setData({localPath:res.name})
   }
 })
},

表单提交

示例

  data: {
    isSubmit: false,
    warn: "",
    phone: "",
    pwd: "",
    isPub: false,
    sex: "男"
  },
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value);
    let { phone, pwd, isPub, sex } = e.detail.value;
    if (!phone || !pwd) {
      this.setData({
        warn: "手机号或密码为空！",
        isSubmit: true
      })
      return;
    }
    this.setData({
      warn: "",
      isSubmit: true,
      phone,
      pwd,
      isPub,
      sex
    })
  },

键盘输入的控制

示例

// pages/telphone/telphone.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    focus: false,
    inputValue: "",
    phone:"",
    code:""
  },
  bindPhone:function(e){
    
    this.setData({phone:e.detail.value});
    console.log(this.data.phone);
  },
  bindCode:function(e){
    this.setData({code:e.detail.value});
  },
  login:function(){
    console.log(this.data.phone);
    console.log(this.data.code);
    //login
    wx.request({
      url: 'http://192.168.1.107:4000/func1',
      data: {phone:this.data.phone,code:this.data.code},
      method: "POST",
      success:(result) => {
        console.log(result.data)
      },
      fail: (res) => {},
      complete: (res) => {},
    })
  },
  bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  bindReplaceInput: function (e) {
    var value = e.detail.value
    var pos = e.detail.cursor
    var left
    if (pos !== -1) {
      // 光标在中间
      left = e.detail.value.slice(0, pos)
      // 计算光标的位置
      pos = left.replace(/11/g, '2').length
    }

    // 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
    return {
      value: value.replace(/11/g, '2'),
      cursor: pos
    }
    // 或者直接返回字符串,光标在最后边
    // return value.replace(/11/g,'2'),
  },
  bindHideKeyboard: function (e) {
    if (e.detail.value === '123') {
      // 收起键盘
      wx.hideKeyboard()
    }
  }
})

wxss-写样式

以下示例类似的样式的结合可以做出见过的大多数界面

<view>示例1</view>
<view class="menu2">
  <view class="item">
    <image src="/images/icon1.png"></image>
    <text>菜单</text>
  </view>
  <view class="item">
    <image src="/images/icon1.png"></image>
    <text>菜单</text>
  </view>
  <view class="item">
    <image src="/images/icon1.png"></image>
    <text>菜单</text>
  </view>
  <view class="item">
    <image src="/images/icon1.png"></image>
    <text>菜单</text>
  </view>
</view>
<view>示例2</view>
<view class="menu">
    <image src="/images/icon1.png"></image>
    <image src="/images/icon1.png"></image>
    <image src="/images/icon1.png"></image>
    <image src="/images/icon1.png"></image>
</view>
<view>示例三</view>
<view class="auction">
  <view class="item">
    <view class="title">第一场</view>
    <view class="tips">
      <view class="status">2012-01-01</view>
      <view class="count"> 12次围观</view>
    </view>
    
    <view class="big">
      <image src="/images/icon2.png"></image>
    </view>
    <view class="small">
      <image src="/images/icon3.png"></image>
      <image src="/images/icon3.png"></image>
      <image src="/images/icon3.png"></image>
      <image src="/images/icon3.png"></image>
    </view>
  </view>
</view>

.menu image,.menu2 image{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
}
/* .menu1{
  height: 1000rpx;
  border: 1rpx solid #ddd;
  display: flex;
  flex-direction: column;
  /*居中格式 flex-start/center/space-around/space-between*/
  /* justify-content: space-around; */
  /* 副轴排列方式 */
  /* align-items: center;} */ 
.menu{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.menu2{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.menu2 .item{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .auction .item{

} */
.auction .item .title{
  font-size: 50rpx;
  font-weight: 600;
}
.auction .item .tips{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 30rpx;
  color: #c9c9c9;
}
.auction .item .big{
  height: 400rpx;
  overflow: hidden;
}
.auction .item .big image{
  width:100%;
  height: 100%;
}
.auction .item .small{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.auction .item .small image{
  height: 100rpx;
  width: 100rpx;
  padding-right:20rpx ;
}