稻草人图床神器小程序源码

稻草人图床神器小程序源码

[TOC]

mini-straw

项目结构

mini-straw ├── component -- 组件 | ├── file -- 文件组件 | ├── image-button -- 图片按钮组件 | ├── search -- 查找页面组件 | ├── tag -- 标签组件 ├── images -- 图片目录 | ├── icon -- icon图片 | ├── tab -- tab图片 ├── model -- 封装的model ├── pages -- 页面 | ├── about -- 关于页 | ├── auth -- 授权页 | ├── file -- 文件页 | ├── index -- 首页 | ├── launch -- 启动页面 | ├── my -- 个人中心 └── utils -- 工具

开屏页

1.判断网络状态

使用wx.getNetworkType({})可获取当前网络状态，networkType值wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)

//判断网络状态wx.getNetworkType({ success: res => { if (res-workType == "none") { wx.showToast({ title: '嗷~~网络不可用', icon: 'none', duration: 2000 }) return; } },})

2.判断授权状态

使用 wx.getSetting({})获取授权状态，在获得data后取data.authSetting['scope.userInfo']判断授权状态

// 获取授权的状态wx.getSetting({ success: data => { if (data.authSetting['scope.userInfo']) { //已授权，执行登陆 wx.getUserInfo({ success: data => { console.log("userInfo {}", data) let userInfo = data.userInfo; wx.setStorageSync('userInfo', userInfo); //执行登陆操作 this._userLoginGetCode(userInfo); } }); wx.setStorageSync('authorized', true); } else { console.log("未授权") //跳转至授权页 let timer = setTimeout(() => { wx.redirectTo({ url: '/pages/auth/auth' }) }, 2000) } }});

若授权，则调用wx.getUserInfo({})获取微信用户信息，信息获取完成后调用wx.login({})获取小程序的code,通过code向后台获取用户openId及token。

//后台获取code_userLoginGetCode(userInfo) { console.log("发起_userLoginGetCode请求"); wx.login({ success(res) { console.log("wx.login {}", res); if (res.code) { // 发起网络请求 const code = res.code; userInfo.code = code; userModel.getTokenByCode(userInfo).then((res) => { console.log("userModel getUserInfo {}", res); wx.setStorageSync("token", res.data.data.token); let timer = setTimeout(() => wx.switchTab({ url: '/pages/index/index', }), 2000) }); } else { console.log('登录失败！' + res.errMsg) } } })},

3.跳转页面

跳转/pages/auth/auth页面使用的是wx.redirectTo({})跳转/pages/index/index页面使用的是wx.switchTab({}) 因为/pages/index/index是小程序tab页，使用wx.redirectTo({})无法跳转

授权页

授权需制定button按钮，加入open-type='getUserInfo'属性，bindgetuserinfo调用自定义方法onGetUserInfo。

好的

onGetUserInfo接受授权状态及授权获取的用户信息，再进行code获取，通过code向后台获取用户openId及token。

onGetUserInfo: function(e) { console.log(e) const userInfo = e.detail.userInfo; if (userInfo) { //通过`code`向后台获取用户openId及token。 this._userLoginGetCode(userInfo); }},

主页

1. 图片按钮插槽组件

在component目录下的images-button组件，做了简单的图片插槽统一，在分享按钮，用户登录按钮，文件上传按钮均可以使用。plain="{{true}}"代表button背景透明

options需要开启插槽功能，添加multipleSlots: true open-type="{{openType}}"父组件将参数传入子组件，子组件在properties属性中可以获取到父组件传来的openType数据，通过this.properties.openType可以获取属性值

options: { // 开启插槽 multipleSlots: true },/** * 组件的属性列表 */ properties: { openType: { type: String } },

index页面引入组件，需要在index.json中添加组件路径

{ "usingComponents": { "btn-cmp": "/component/image-button/index" }}

2. 上传文件

主要使用到wx.chooseImage({})进行图片的选择，选择后使用wx.uploadFile({})上传图片至服务器

//上传文件onUpload(event) {let _this = this;wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function(res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 let tempFilePaths = res.tempFilePaths; console.log(tempFilePaths) wx.uploadFile({ header: { "Authorization": "Bearer " + wx.getStorageSync("token") }, url: config.apiBaseUrl + '/file/upload', filePath: tempFilePaths[0], name: 'file', success: (res) => { wx.showToast({ title: "上传成功~", icon: 'none', duration: 2000 }) }, fail: (res) => { wx.showToast({ title: res.data.msg, icon: 'none', duration: 2000 }) } }) }})}

列表页

1.search组件的显示和隐藏

引入search组件

"usingComponents": { ... "search-cmp": "/component/search/index" }

...

#file页面中的search-cmp组件

父组件file页面绑定子组件传来的cancel事件通知，就调用onCancel方法, 在onCancel方法中获取事件响应，将searchPage参数修改为false，search组件就隐藏起来了

//cancel searching page onCancel(event) { console.info(event) this.triggerEvent('cancel', {}, {}); },

2.文件列表

1.获取列表信息传递给file组件

在page中的file页面，获取到后台传来的fileList数据，引入file组件，file="{{item}}"将数据传入子组件

在component中的file组件，在properties添加属性file来接收父组件传来的数据

/** * 组件的属性列表 */ properties: { file: Object }

file组件在xml页面中使用{{file.fileName}}即可获取到对象信息，相应的数据也会呈现在页面上

2.粘贴板操作

onCopy: function (event) { console.info(event) let _this = this; wx.setClipboardData({ data: _this.properties.file.filePath, success: function(res) { wx.showToast({ title: '图片地址复制成功', }) } });

3.删除操作

onDelete: function (event) { console.info(event) let fileId = this.properties.file.id; this.triggerEvent('del', {fileId}, {}); },

父组件file页面绑定子组件传来的del事件

调用onDelete出发网络请求去完成删除文件的逻辑,删除成功后重新刷新文件列表

//删除图片onDelete(event) { console.info("DEL") console.info(event) let fileId = event.detail.fileId; fileModel.delFileById(fileId).then((res) => { console.info(res); wx.showToast({ title: '删除成功', }) this.setData({ pageNum: 1, fileList: [] }); this._getFileList(); })},

我的页面

1.意见和建议

小程序自带用户反馈功能，使用button跳转至网页，用户可以填写相关反馈,open-type设置为feedback

反馈建议

2.小程序客服

小程序的button中的open-type拥有开放能力,在微信公众平台中启用客服功能，添加客服人员，在代码中添加button即可弹出客服聊天界面,open-type设置为contact

联系客服

3.小程序分享

此处使用插槽,button中的open-type设置为share

动画

小程序动画官方文档 开屏动画，设置文字透明度，从0到1，渐渐显示，主要使用到opacity去设置组件的透明度，先创建一个动画animationTip,持续800ms,然后在setTimeout(function () {})中设置动画出现时间

var animationTip = wx.createAnimation({ //持续时间800ms duration: 800, timingFunction: 'ease', }); this.animationTip = animationTip; animationTip.opacity(0).step() this.setData({ animationTip: animationTip.export() }) setTimeout(function () { animationTip.opacity(1).step() this.setData({ animationTip: animationTip.export() }) }.bind(this), 500)

部署

修改utils目录下的config.apiBaseUrl,改成自己的域名，上传到微信公众号平台，在版本管理中进行发布

const config ={ apiBaseUrl: "你自己的域名或服务器地址"}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。