相关文章
【微信小程序】开发者工具以及小程序框架介绍https://blog.csdn.net/qq_17470165/article/details/80200857
【微信小程序】日历打卡之小程序发现页https://blog.csdn.net/qq_17470165/article/details/80202743
【微信小程序】日历打卡之打卡功能开发https://blog.csdn.net/qq_17470165/article/details/80382761
前言
上篇介绍了日历打卡小程序发现页视图相关开发知识点。本篇文章将介绍小程序的网络请求,数据绑定等知识点以及打卡活动的创建功能。
网络请求
小程序网路请求API
wx.request({
url: 'http://www.ho0229.cn', //接口地址
data: { //请求参数
x: '' ,
y: ''
},
header: { //请求头
'content-type': 'application/json'
},
success: function(res) { //请求成功回调
console.log(res.data)
},
fail:function(res){ //请求失败回调
console.log(res.data)
}
})
网络请求封装
//POST请求封装
function Post(requestUrl, requestHandler) {
this.requestPost('POST', requestUrl, requestHandler)
}
function requestPost(method, requestUrl, requestHandler) {
var userId = wx.getStorageSync("userId");
var token = wx.getStorageSync("token");
var params = requestHandler.params;
wx.request({
url: requestUrl,
data: params, //post请求参数
method: method,
header: {
"authorization": authorization,
"Content-Type": "application/json"
},
success: function (res) {
requestHandler.success(res)
},
fail: function (res) {
requestHandler.fail(res);
},
})
}
module.exports = {
Get: Get,
Post: Post,
}
页面的Javascript文件引入utils中导出的网络请求方法,以项目中为例,get请求更加简单,只需要将参数拼接在requestUrl上即可。
const app = getApp() //获取应用实例
var utils = require('../../utils/util.js') //获取utils对象
Page({
onLoad: function () {
var dataUrl = app.globalData.laiSignBaseUrl + "xxx/firstPage"
var params = new Object(); //创建object对象,添加请求参数
params.uid = wx.getStorageSync('userId');
params.currentpage = this.data.currentpage;
utils.Post(
dataUrl, //用utils对象调用Post方法
{
params, // post请求的参数
success: function (res) { // 返回成功
if (res != null && res.data != null && res.data.success) {
//绑定数据操作
}
},
fail: function (res) {
},
})
},
})
打卡创建
部分基础组件比如<input> 、<textarea>、 <picker>等使用组件的使用方法将不在这里介绍,大家可以看下开发文档即可。
1、小程序选择并上传图片
wx.chooseImage({
count: 1, //选择张数
sizeType: ['original', 'compressed'], // 原图,压缩图片
sourceType: ['album', 'camera'], //相机或者拍照
success: function (res) {
var pages = getCurrentPages(); //获取当前所有页面的实例
var prevPage = pages[pages.length - 2]; //获取到上个页面的page实例
wx.uploadFile({
url: app.globalData.laiSignBaseUrl + "xxx/upload/img/pic",
filePath: res.tempFilePaths[0], //选取后图片地址 这里返回的是腾讯服务器上的一个临时图片地址
name: "file",
success: function (res) {
var data = JSON.parse(res.data); //上传成功返回值,注意:这里不是图片的Url,需要解析
if(data != null && data.success){
prevPage.setData({ //上个页面的实例设置一个图片封面的值
coverUrl:data.result[0]
})
}
wx.navigateBack(); //返回到上个页面
},
fail: function (res) {
// console.log(res)
}
})
},
})
2.、活动图片实现
wxml :
<view class="erasable-layout">
<image class="image" src="{{item}}" bindtap="previewImage" mode="aspectFill"></image>
<image class="delete-icon" data-index="{{index}}" bindtap="deleteImage" src="../imgs/delete.png"></image>
</view>
wxss :
.erasable-layout {
position: relative;
margin-right: 50rpx;
width: 100rpx;
height: 100rpx;
}
.image{
width:100%;
height:100%;
}
.delete-icon {
width: 25rpx;
height: 25rpx;
position: absolute;
left: 87rpx;
top: -5rpx;
}
3、<rich-text>实现
在项目里有一个功能点是活动详情,以图文的形式呈现,也有可能是只显示图片或者只显示文字,两者都无情况暂时不考虑,图文内容就是创建打卡时填写的打卡详情和活动图片。
这个功能开发我使用的是小程序提供的<rich-text>富文本来实现功能。首先来看下小程序提供的富文本组件。
<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// rich-text.js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text', //还有node类型
text: 'Hello World!'
}]
}]
},
})
元素节点:type = node
属性 说明 类型 必填
name 标签名 String 是
attrs 属性 Object 否
children 子节点列表 Array 否
<rich-text>的使用方法很简单,其实唯一复杂的点是在children中,假设我们有一段文字和3张图片,那么node只需要这样显示即可。
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [
{
type: 'text', //还有node类型
text: 'Ho CSDN Rich-Text!'
},
{ //图片1
type: 'node',
name: 'img',
attrs: {
class: 'div_class',
style: 'display:block;magin:0 auto;',
src: 'http://ho_csdn_node_image1.png',
width:'100%'
},
},
{ //图片2
type: 'node',
name: 'img',
attrs: {
class: 'div_class',
style: 'display:block;magin:0 auto;',
src: 'http://ho_csdn_node_image2.png',
width:'100%'
},
}
}
}]
介绍到这里大家就明白了,其实就是在 children 数组里面添加一个个文本或者图片Object对象,如添加的图片示例,Object对象里面再添加一个名字为 attrs 的Object即可,部分代码如下,大家可以。
wx.uploadFile({
url: app.globalData.laiSignBaseUrl + "xxx/upload/img/pic",
filePath: filePath,
name: "file",
success: function (res) {
var paramsOut = new Object(); //children子Obect
paramsOut.type = "node";
paramsOut.name = "img";
var paramsInner = new Object(); //attrs
paramsInner.style = "display:block;margin:0 auto;margin-top:8px;color:red;font-size:12px" //图片属性
paramsInner.src = JSON.parse(res.data).result[0] + ""; //图片url
paramsInner.width = "100%"; //图片宽度
paramsOut.attrs = paramsInner;
tempNodesDatas.push(paramsOut); //Object添加到children数组中
that.setData({
nodesDatas: that.data.nodesDatas.concat(tempNodesDatas)
}
console.log("nodeDatas", that.data.nodesDatas)
},
fail: function (res) {
}
})
结尾
本篇文章对小程序的网络请求进行了介绍,对其进行了封装。也介绍了<rich-text>富文本的使用方法。选择地点获取地址和经纬度将不再介绍,API相对简单。活动图片选择和网络请求封装Demo下载链接如下。
网络请求封装及活动图片功能https://download.csdn.net/download/qq_17470165/10399417