微信小程序入门记录
小程序开发文档，常用组件。。。
自学的一个过程，记录下来方便以后回顾
wxml代码：
{{list[ind]}}
{{username}}
......
......
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
}