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

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);//loginwx.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.valuevar pos = e.detail.cursorvar leftif (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 ;
}