小程序开发文档，常用组件。。。
自学的一个过程，记录下来方便以后回顾
wxml代码：
<!--index.wxml-->
<!-- ------------------------view 视图容器----------------------- -->
<!--
hover-class:点击变换属性
hover-stop-propagation:停止父节冒泡
hover-start-time:点击完后，多久出现效果
hover-stay-time:点击后，效果停留多长时间
-->
<!-- <view hover-class='vv_press'>
<view hover-class='v_press' hover-stop-propagation='true' hover-start-time='3000' hover-stay-time='3000'>
hello david
</view>
</view> -->
<!-- ------------------------scroll-view 可左右上下滑动图----------------------- -->
<!--
display:inline-block : 不让换行，改为行级元素，但是会因为屏幕小会自动到下一行
white-space:nowrap 将4个元素放到一行上，不会因为屏幕小而自动换行
scroll-x='true' 将显示不了的元素，可以进行左右滑动显示
scroll-y='true' 可以上下进行滑动显示
-->
<!-- <scroll-view style='white-space:nowrap' scroll-x='true'>
<view style='background:red;width:400rpx;height:200rpx;display:inline-block;' ></view>
<view style='background:blue;width:400rpx;height:200rpx;display:inline-block;' ></view>
<view style='background:yellow;width:400rpx;height:200rpx;display:inline-block;' ></view>
<view style='background:green;width:400rpx;height:200rpx;display:inline-block;' ></view>
</scroll-view>
<scroll-view style='height:300rpx;' scroll-y='true'>
<view style='background:red;width:400rpx;height:200rpx;display:inline-block;' ></view>
<view style='background:blue;width:400rpx;height:200rpx;display:inline-block;' ></view>
<view style='background:yellow;width:400rpx;height:200rpx;display:inline-block;' ></view>
<view style='background:green;width:400rpx;height:200rpx;display:inline-block;' ></view>
</scroll-view> -->
<!-- ------------------------swiper 轮播图----------------------- -->
<!--
autoplay='true' 开启自动轮播
indicator-dots='true' 显示小点
interval='1000' 间隔时间
duration='2000' 图片滑动时间快慢
-->
<!-- <swiper autoplay='true' indicator-dots='true' interval='1000' duration='2000'>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}"></image>
</swiper-item>
</block>
</swiper> -->
<!-- ------------------------movable-view 可移动的元素----------------------- -->
<!--
direction='all' 可将元素随便移动
direction='vertical' 垂直上下移动
direction='horizontal' 水平左右移动
direction='none' 无
-->
<!-- <movable-area style='width:400rpx;height:300rpx;background:green'>
<movable-view style='width:100rpx;height:100rpx;background:red' direction='all'></movable-view>
</movable-area> -->
<!-- ------------------------cover-view 播放器----------------------- -->
<!-- <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
controls="{{false}}" event-model="bubble">
<cover-view class="controls">
<cover-view class="play" bindtap="play">
<cover-image class="img" src="/path/to/icon_play" />
</cover-view>
<cover-view class="pause" bindtap="pause">
<cover-image class="img" src="/path/to/icon_pause" />
</cover-view>
<cover-view class="time">00:00</cover-view>
</cover-view>
</video> -->
<!-- ------------------------icon展示----------------------- -->
<!-- <view>
<icon type='success' size='50rpx' color='red'></icon>
<icon type='success' size='50rpx'></icon>
<icon type='success_no_circle' size='50rpx'></icon>
<icon type='info' size='50rpx'></icon>
<icon type='warn' size='50rpx'></icon>
<icon type='waiting' size='50rpx'></icon>
<icon type='cancel' size='50rpx'></icon>
<icon type='download' size='50rpx'></icon>
<icon type='search' size='50rpx'></icon>
<icon type='clear' size='50rpx'></icon>
</view> -->
<!-- ------------------------text文本----------------------- -->
<!--
selectable:文本是否可选
nodes:富文本 <p class="p1" style="color:red">
progress 进度条
percent="80" 百分比0~100
show-info='true' 在进度条右侧显示百分比
active 进度条从左往右的动画
color 进度条颜色 （请使用 activeColor）
-->
<!-- <view>
<text selectable='true'> helloworld</text>
</view>
<view>
<rich-text nodes='<h1>hello</h1>'></rich-text>
<rich-text nodes='<p class="p1" style="color:red">hello1234 </p>'></rich-text>
<rich-text nodes="{{nodes}}"></rich-text>
</view>
<view>
<progress percent="80" show-info='true' active color='red'></progress>
</view> -->
<!-- ------------------------button按钮----------------------- -->
<!--
size 按钮的大小
plain 按钮是否镂空，背景色透明
disabled 是否禁用
loading 名称前是否带 loading 图标
-->
<!-- <view>
<button type='default' size='mini'>default</button>
<button type='warn'>warn</button>
<button type='warn' plain='true'>warn</button>
<button type='primary'>default</button>
<button type='primary' loading='true'>default</button>
<button type='primary' disabled='true'>default</button>
</view> -->
<!--
checked : 默认选中
disabled ： 是否禁用
-->
<!-- <view>
<checkbox value='1'>北京</checkbox>
<checkbox value='2' checked='true' disabled="true">上海</checkbox>
<checkbox value='3'>广州</checkbox>
<checkbox value='4'>深州</checkbox>
</view> -->
<!--
border:1rpx solid red; 1rpx像素的红色边框
password: 输入隐藏
maxlength: 最大长度
placeholder： 默认框中的名字
-->
<!-- <view>
账号：
<input type="text" style='border:1rpx solid red' placeholder='用户名'></input>
密码：
<input type="password" maxlength='6' style='border:1rpx solid red'></input>
</view> -->
<!-- ------------------------picker选择器 ----------------------- -->
<!--
selector : 普通选择器 Array
multiSelector: 多列选择器 二维Array [["a","b"], ["c","d"]]
time：时间
date：日期
region：省份城市
-->
<!-- <view>
<picker mode="selector" value='1' range='{{range}}'>
请选择国家
</picker>
<picker mode="multiSelector" value='1' range='{{range_more}}'>
请选择字母
</picker>
<picker mode="time" value='' start='00:00' end="24:00">
请选择时间
</picker>
<picker mode="date" value='' start='2000-01-01' end='2020-01-01'>
请选择日期
</picker>
<picker mode="region">
请选择城市
</picker>
</view> -->
<!-- ------------------------radio-group 单选框 ----------------------- -->
<!--
checked='true': 默认选中
color='red' 选中的颜色
disabled='true' 默认禁点
-->
<!-- <view>
<radio-group>
<radio value='1' checked='true'>北京</radio>
<radio value='2' color='red'>上海</radio>
<radio value='3' disabled='true'>广州</radio>
</radio-group>
</view> -->
<!-- ------------------------slider 滑动选择器 ----------------------- -->
<!--
step:10 10格10格拖动
show-value 条右边显示进度值
color 线条颜色
-->
<!-- <view>
<slider max='200' step='10' show-value='true' color='red'></slider>
</view> -->
<!-- ------------------------switch 开关选择器 ----------------------- -->
<!-- <view>
<switch checked='true' color='red'>是</switch>
</view> -->
<!-- ------------------------textarea 多行输入框 ----------------------- -->
<!-- <view>
<textarea style='border:1rpx solid gray'></textarea>
</view> -->
<!-- ------------------------form表单提交 ----------------------- -->
<!-- <form bindsubmit='submit'>
账号：
<input type='text' name='username' style='border:1rpx solid red'></input>
密码：
<input type='password' name='password' style='border:1rpx solid red'></input>
<button type='primary' form-type='submit'>提交</button>
</form> -->
<!-- ------------------------navigator页面链接 ----------------------- -->
<!--
open-type='redirect'： 跳转完后没有返回键
-->
<!-- <view>
<navigator url='../logs/logs'>点我跳转</navigator>
<navigator url='../logs/logs' open-type='redirect'>点我跳转</navigator>
</view> -->
<!-- ------------------------audio 音频组件 ----------------------- -->
<!--
loop: 循环播放
-->
<!-- <audio poster="http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000" name="此时此刻" author="许巍" src="http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46" id="myAudio" controls loop></audio> -->
<!-- ------------------------image 音频组件 ----------------------- -->
<!-- <image src='../image/1.jpg' style='width:100%;' mode='center'></image> -->
<!-- ------------------------video 视频组件 ----------------------- -->
<!-- <video src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400' style='width:100%'></video> -->
<!-- ------------------------ camera系统相机 ----------------------- -->
<!--
device-position:前置或后置，值为front, back
-->
<!-- <camera device-position='front'></camera> -->
<!-- ------------------------ map地图 ----------------------- -->
<!-- <map longitude="113.324520" latitude="23.099994" scale="14" show-location style="width: 100%; height: 300px;"></map> -->
<!-- <view> hello world</view>
<view> {{username}}</view>
<view> {{json.age}}</view>
<view> {{arr[0]}}</view>
<view style='height:2000rpx;width:300rpx;background:red;'></view> -->
<!-- 引用模板 -->
<!-- <import src='../template/template.wxml' />
<template is='tem' date='{{...json}}'/> -->
<view>{{list[ind]}}</view>
<button bindtap='sub' type='primary'>提交</button>
<button bindtap='save' type='primary'>保存</button>
<button bindtap='getBy' type='primary'>获取</button>
<button bindtap='del' type='primary'>删除</button>
<view>{{username}}</view>
<button bindtap='getloc' type='primary'>获取位置</button>
<button bindtap='getinfo' type='primary'>获取设备</button>
<button bindtap='call' type='primary'>拨打电话</button>
<button bindtap='code' type='primary'>扫码</button>
<button bindtap='upimg' type='primary'>上传图片</button>
<!-- 预览图片 -->
<!-- <image src='https://cires.gydhp.com/20180418/5ad71cca867b5.png' data-src='https://cires.gydhp.com/20180418/5ad71cca867b5.png' bindtap='preimg' ></image> -->
<button bindtap='getimg' type='primary'>获取图片信息</button>
<!-- 保存图片到本地相册 -->
<button bindtap='savelocal' type='primary'>获取图片保存到本地</button>
<!-- <image src='{{imgsrc}}'></image> -->
<button bindtap='getUserInfo' type='primary'>获取后台数据</button>
<button bindtap='saveInter' type='primary'>上传图片到服务器上</button>
<button bindtap='linksocket' type='primary'>socket连接</button>
<button bindtap='getLogin' type='primary'>登录</button>
<button bindtap='getLoginStatus' type='primary'>登录状态检验</button>
<button bindtap='getpay' type='primary'>支付</button>
<!-- 顶部固定 -->
<view class="page__hd" style="position:fixed; top:0;width: 750rpx;">
......
</view>
<!-- 底部固定 -->
<view class="page__hd" style="position:fixed; bottom:0;width: 750rpx;">
......
</view>
<!-- 客服回复 -->
<button class='contact-btn' open-type='contact'>去客服消息回复“1”</button>
js代码：
//index.js
//获取应用实例
const app = getApp()
// Page({
// data: {
// imgUrls: [
// '../image/1.jpg',
// '../image/2.jpg',
// '../image/3.jpg',
// ],
// nodes: [{
// "name": "p",
// "attrs": {
// "class": "p1",
// "style": "color:red"
// },
// "children": [{
// "type": "text",
// "text": "hello1234"
// }]
// }],
// range: ["中国", "美国", "俄国", "韩国"],
// range_more: [
// ["a", "b"],
// ["c", "d"]
// ]
// },
// 播放器js开始----->>>>>>>>>>>
// onReady() {
// this.videoCtx = wx.createVideoContext('myVideo')
// },
// play() {
// this.videoCtx.play()
// },
// pause() {
// this.videoCtx.pause()
// },
// 播放器js结束------------------<<<<<<<<<<
// submit: function(res) {
// console.log("submit:", res.detail.value)
// }
// })
Page({
/**
* 页面的初始数据
*/
data: {
username: "德玛西亚",
json: {
"a": {
"age": 20
},
"b": {
"name": "中国"
}
},
arr: ['北京', '上海'],
ind: '',
list: ['北京', '上海', '广州', '深圳'],
username: '',
imgsrc: '',
},
/**
* 生命周期函数--监听页面加载 >>>执行顺序：1
*/
onLoad: function(options) {
console.log("index onLoad")
},
/**
* 生命周期函数--监听页面初次渲染完成 >>>执行顺序：3
*/
onReady: function() {
console.log("index onReady")
},
/**
* 生命周期函数--监听页面显示 >>>执行顺序：2
*/
onShow: function() {
console.log("index onShow")
},
/**
* 生命周期函数--监听页面隐藏，后台没有销毁
*/
onHide: function() {
console.log("index onHide")
},
/**
* 生命周期函数--监听页面卸载，后台已经销毁了
*/
onUnload: function() {
console.log("index onUnload")
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
console.log("index onPullDownRefresh")
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
console.log("index onReachBottom")
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
console.log("index onShareAppMessage")
return {
"title": "名称"
}
},
/**
* 滑动页面事件
*/
onPageScroll: function() {
console.log("index onPageScroll");
},
/**
* 弹框提醒
* title 文本最多显示 7 个汉字长度
* icon: 图标,success,loading,none
* duration： 显示停留时间,默认1500
*
*/
sub: function() {
//弹框提示
// wx.showToast({
// title: '成功',
// icon:'none',
// duration: 8000
// })
// //将上面显示框的时间在规定时间内隐藏
// setTimeout(function(){
// wx.hideToast();
// },1000)
// //一直显示加载中
// wx.showLoading({
// title: '加载中',
// })
// //规定时间内取消显示
// setTimeout(function(){
// wx.hideLoading();
// },1000)
// //弹框提示 有确定取消按钮
// wx.showModal({
// title: '提示',
// content: '是否确定注册',
// showCancel: false, //是否显示取消按钮
// cancelText: "No", //更改取消按钮的文字，最多4个字
// confirmText: "Yes", //更改确认按钮的文字，最多4个字
// success(res) {
// if (res.confirm) {
// console.log("确定")
// } else {
// console.log("取消")
// }
// },
// })
// //底部弹框,并打印出值到页面
// var that = this;
// wx.showActionSheet({
// itemList: ['北京', '上海', '广州', '深圳'],
// success(res) {
// console.log(res);
// that.setData({
// ind: res.tapIndex
// })
// }
// })
// //点击提交后标题有一个loading图标
// wx.showNavigationBarLoading();//显示
// wx.hideNavigationBarLoading();//隐藏
// //页面跳转,== 跳转到新的页面，还可以返回到上一个页面，有返回按钮
// wx.navigateTo({
// url: '../logs/logs',
// })
// //页面跳转,==打开新的页面，原页面销毁，没有返回按钮
// wx.redirectTo({
// url: '../logs/logs',
// })
},
/**
* 存储到本地缓存中
*/
save: function() {
//异步存储
wx.setStorage({
key: 'username',
data: '邓超',
})
//同步存储
wx.setStorageSync('name', '陈赫')
},
/**
* 获取缓存中的数据
*/
getBy: function() {
var that = this;
wx.getStorage({
key: 'username',
success: function(res) {
console.log(res)
that.setData({
username: res.data
})
},
})
this.setData({
username: wx.getStorageSync("age")
})
},
/**
* 删除缓存中的值
*/
del: function() {
//异步删除
wx.removeStorage({
key: 'user',
success: function(res) {
console.log(res)
},
})
//同步删除
wx.removeStorageSync("age")
//异步清理本地缓存
// wx.clearStorage()
//同步清除本地缓存
wx.clearStorageSync()
},
/**
* 获取位置
*/
getloc: function() {
wx.getLocation({
type: 'gcj02', //wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
altitude: true,
success: function(res) {
console.log(res)
var latitude = res.latitude;
var longitude = res.longitude;
var speed = res.speed;
var accuracy = res.accuracy;
wx.openLocation({
latitude: latitude,
longitude: longitude,
scale: 28
})
},
})
},
/**
* 获取设备
*/
getinfo: function() {
wx.getSystemInfo({
success: function(res) {
console.log(res)
},
fail: function(res) {},
complete: function(res) {},
})
//获取网络连接方式
wx.getNetworkType({
success: function(res) {
console.log(res)
},
})
},
/**
* 拨打电话
*/
call: function() {
wx.makePhoneCall({
phoneNumber: '17600116461',
})
},
/**
* 扫码
*/
code: function() {
wx.scanCode({
success: function(res) {
console.log(res)
}
})
},
/**
* 上传图片
*/
upimg: function() {
wx.chooseImage({
count: 1, //最多可以选择的图片张数,默认9
sourceType: ['album', 'camera'], //选择图片的来源:album从相册选图,camera使用相机
success: function(res) {
console.log(res)
},
})
},
/**
* 预览图片
*/
preimg: function(res) {
console.log(res)
var imgsrc = res.target.dataset.src;
wx.previewImage({
urls: [imgsrc],
})
},
/**
* 获取图片信息
*/
getimg: function(res) {
wx.getImageInfo({
src: 'https://cires.gydhp.com/20180418/5ad724a22cd73.png',
success: function(res) {
console.log(res)
}
})
},
/**
* 获取图片保存到本地
*/
savelocal: function(res) {
var that = this;
wx.chooseImage({
success: function(res) {
console.log(res)
var temp = res.tempFilePaths[0];
console.log(temp)
wx.saveFile({
tempFilePath: 'temp',
success: function(res) {
console.log("11111111" + res)
that.setData({
imgsrc: tempFilePath
})
}
})
},
})
},
/**
* get请求demo，post请求demo
*/
getUserInfo: function() {
//get请求
// wx.request({
// url: 'http://192.168.1.39',
// method: 'GET',
// success: function(res) {
// console.log(res)
// }
// })
//post请求
wx.request({
url: 'http://192.168.1.39',
// data: 'username=dengchao&age=30',
data: {
"username": "dengchao",
"age": 30
},
header: {
"content-type": "application/x-www-form-urlencoded"
},
method: 'post',
dataType: 'json',
responseType: 'text',
success: function(res) {
console.log(res)
},
fail: function(res) {},
complete: function(res) {},
})
},
/**
* 客服对话、聊天
* ws==http
* wss==https
*/
linksocket: function() {
wx.connectSocket({
url: 'ws://192.168.1.39:8888',
success: function(res) {
console.log(res)
}
})
//监听 WebSocket 连接打开事件
wx.onSocketOpen(function() {
console.log("success")
})
//监听 WebSocket 接受到服务器的消息事件
wx.onSocketMessage(function(res) {
console.log(res)
})
},
/**
* 获取openid
*/
getLogin: function(res) {
//获取code
wx.login({
success: function(res) {
console.log(res)
if (res.code) {
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
},
success: function(res) {
//获取token
console.log(res)
}
})
} else {
console.log("登录失败")
}
}
})
},
getLoginStatus: function(res) {
wx.checkSession({
success: function(res) {
//未失效
},
//登录状态失效需要再次调用wx.login方法
fail: function(res) {
wx.login({
success: function(res) {
console.log(res)
if (res.code) {
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
},
success: function(res) {
//获取token
console.log(res)
}
})
} else {
console.log("登录失败")
}
}
})
}
})
},
/**
* 支付
*/
getpay: function() {
wx.requestPayment({
timeStamp: '',
nonceStr: '',
package: '',
signType: '',
paySign: '',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
}
})css代码：
/**index.wxss**/
.v_press{
background: red;
width: 200rpx;
height: 200rpx;
}
.vv_press{
background: green;
width: 400rpx;
height: 400rpx;
}
/* 播放器css */
.controls {
position: relative;
top: 50%;
height: 50px;
margin-top: -25px;
display: flex;
}
.play,
.pause,
.time {
flex: 1;
height: 100%;
}
.time {
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
color: white;
line-height: 50px;
}
.img {
width: 40px;
height: 40px;
margin: 5px auto;
}
/* 播放器css结束 */
/*边框设置属性*/
.border{
border: 2rpx solid #7F99CC; //设置边框宽度，边框颜色
box-shadow:0 0 20rpx #7F99CC; //设置外部阴影宽度，阴影颜色
}
/*客服框设置属性*/
.contact-btn {
border-radius: 2rpx;
font-size: 30rpx;
color: #fff;
text-align: center;
line-height: 70rpx;
background: #bd10e0;
width: 522rpx;
height: 70rpx;
margin-left: 116rpx;
}
.{
text-align: center; /** 水平居中 **/
line-height: 350rpx; /** 垂直居中 **/
border-top: 1rpx solid #e8e8e8;
border-radius: 20rpx; //圆角设置
border-top-left-radius:0rpx;
border-top-right-radius:0rpx;
border-bottom-left-radius:10rpx;
border-bottom-right-radius:10rpx;
float: right;//居右
margin-right:26rpx;//承上(float: right)
// 上内边距是 10px,右内边距是 5px,下内边距是 15px,左内边距是 20px
padding:10px 5px 15px 20px;
transform: rotate(45deg);//旋转角度
}json代码：
{
"enablePullDownRefresh": true
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
