海风小店部署教程

最新推荐文章于 2021-05-10 00:12:22 发布

GZLEO77

最新推荐文章于 2021-05-10 00:12:22 发布

阅读量2.4k

点赞数 2

原文链接：https://blog.csdn.net/weixin_45110296/article/details/107863324

版权

海风小店部署教程

2020年8月7日对你二不完

1. 源码地址：

官网地址：
http://hiolabs.com/?cat=4 海鸥实验室

GitHub：
微信小程序：https://github.com/iamdarcy/hioshop-miniprogram
后台管理： https://github.com/iamdarcy/hioshop-admin
服务端： https://github.com/iamdarcy/hioshop-server

官网教学视频：
服务端： https://www.bilibili.com/video/av89567916
后台管理： https://www.bilibili.com/video/av89568075

2.宝塔部署教程：

准备条件：
(1) 云服务器：部署了宝塔面板，并安装apache(nginx要自行解决跨域问题)、mysql5.7、PHP(图片存储到服务器需要安装这个),phpmyadmin(用来管理数据库,很方便,可能需要安装对应版本的php)等,配置最低1核2G；
(2) 域名：已备案，且解析到云服务器ip：假设域名为abc.com 建议将*.baota.abc.com解析到该云服务器ip(即主机记录为*.baota，这种解析叫做泛解析，*可以是任何内容，这些域名都被解析到该ip)；

下载：
链接：https://pan.baidu.com/s/138i-QavhhYQ1cn_tDJ6eQQ 提取码：9999 此为我个人优化版本，内置了node模块，即无需再执行npm install；内有两个版本，名字带图片自定义存储的要配置图片存储的服务器，另一个和源码一样，存储到七牛云；压缩包内有说明文档，务必认真仔细看，基本上出现问题都是没有看说明文档，其他问题可以翻看本文后半部分的常见问题；

数据库：
宝塔面板新建数据库(权限改成所有人)并进入管理，选择新建的数据库后点击右侧导入，选择解压后的sql后缀文件，确定；

本地调试
，按照压缩包内的说明文档进行配置并启动(数据库配置写上一步新建的配置，地址为云服务器ip地址)，测试无误后将server打包，通过服务器的宝塔面板上传至网站根目录；

配置云端：
(1) 宝塔面板-网站-添加站点：域名为api.baota.abc.com 点提交；
(2) 点击新建的网站名，点击SSL，点击申请，一分钟左右，SSL部署完成；
(3) 点击新建网站的根目录，上传打包好的server并解压，大概目录为/www/wwwroot/api.baota.abc.com/server 目录下有development.js
(4) 宝塔面板-软件商店-安装PM2管理器-左侧点击Node版本，选择12.几或者更高，点击切换；然后在项目列表里选择server目录作为项目所在根目录，development.js作为启动文件名称，项目名称任意；点添加；
(5) 关闭PM2管理器面板并重新打开可以看到端口号:8360(默认),如果同时有多个项目要改成不同的端口；改端口看下载的压缩包里的说明文档；并在宝塔面板-安全里面开放端口，以及配置云服务器的安全组；
(6) 访问api.baota.abc.com:8360可以正确显示OK说明到目前位置配置正确；
(7) 宝塔面板-网站，点击新建的网站名；点击左侧的反向代理，点添加反向代理，代理名称任意，目标URL为http://127.0.0.1:8360(如果是其他端口这里也要改),发送域名则是默认的 $host,开启代理并保存;
(8) 此时访问https://api.baota.abc.com配置正确的话会显示OK；说明server配置完全，此时的server地址是https://api.baota.abc.com，需要配置该地址的地方有server中config里支付通知地址前面要设置该地址，小程序api.js里的rooturl前面设置该地址，后端管理api.js前面也设置该地址；如果需要修改server的配置，先在PM2管理器面板处点击停止，再找到server目录内的配置文件config.js，配置完再回到PM2管理器点击开启；
(9) 如果想同时开启多个server，从(1)开始重复，即添加域名为api2.baota.abc.com的站点，部署SSL并在config.js中配置新的端口如8361，然后在新站点中配置反向代理至http://127.0.0.1:8361即可
(10) 以这种方式开启的https不需要在config配置文件里配置SSL证书，也不用设置ishttps为true，保持默认即可；上述方式中部署SSL需要在反代理之前，反之无法部署SSL；
(11) 在server/src/api/service/token.js中有自行设置的密钥，自行更换，否则有安全风险；

配置后端管理：
(1) 本地调试：按照说明文档进行调试，api.js文件中的rootURL可以设置为http://127.0.0.1:8360/admin/(这里的端口要和server配置的一致),并最终在dist/web下生成静态html文件，将该文件夹全选并添加到压缩文件web.rar；
(2) 部署云端：宝塔面板-网站-添加站点，域名为admin.baota.abc.com;打开改网站根目录,上传web.rar并解压缩，保证index.html文件在网站根目录即可；访问admin.baota.abc.com即可，用户名admin，密码123456；

配置图片存储：
(1) 图片默认存储在七牛云的对象存储空间，需要申请，并配置域名；如果想把图片存储到宝塔面板的服务器里，首先上面2、中的下载，需要下载名称中带有图片自定义存储等字样的版本；
(2) 该版本解压后，文件夹中多一个index.php文件，且说明文档最下方多几行说明文字；按照说明配置即可：宝塔面板添加站点，域名为pic.baota.abc.com,设置根目录权限为666及以上；最好开启SSL；

源码bug及解决方案、新功能、常见问题：

一、七牛云配置问题：

(1) 申请账号：https://www.qiniu.com/官网注册并登录；可以以个人身份申请，没有影响；申请时需要实名认证；

(2) 申请空间：登录之后，在控制台页面找到对象存储空间点击添加；输入自定义的存储空间名称(这个名字就是server配置中的bucket，假设是test123)；存储区域默认华南；公开；确定；询问是否绑定自定义域名，正常是需要绑定的，也可以暂时不绑定，会赠送测试域名，可用30天；

(3) 查看测试域名：在空间管理中点击新建的空间名；在空间概览中右侧可以看到CND测试域名，这个域名就是server的配置中domain的域名，假设是qeoqxrppg.bkt.clouddn.com；

(4) server七牛云配置：首先，最需要配置的是qiniu:；qiniuhttps配不配置不影响使用，只影响分享图；qiniu配置如下：

qiniu: {

access_key: ‘asdlakjsdlajlajsdlas’,

secret_key: ‘alskdjalksjdlasjdlajsd’,

bucket: ‘test123’,

domain: ‘http://qeoqxrppg.bkt.clouddn.com/’

发现domain在原来的测试域名基础上，前面加了http://，后面加了/，这个不能省略；省略之后无法访问到图片；access_key和secret_key的获取方式：七牛云控制台，鼠标右上角的头像，点击密钥管理；分别对应页面中的AK和SK；

(5) 自定义域名：如果是http，按照七牛云的说明进行解析即可，然后在上面的配置中替换掉domain中的域名即可；qiniu不强制要求https，http小程序端也是可以访问的；但是因为分享图需要保存到本地；只能使用https，所以最终上线还是需要配置https的域名；按照要求配置，可能要很长时间才能更新状态；七牛云配置了https域名后；配置在qiniuhttps中即可，qiniuhttps中还有个区域选择，如果是默认的华南，zoneNum填2即可；

(6) 上传图片上传不了：最大可能是后端的配置文件api.js中的qiniu地址没配置对；默认的华南区域的这里要配置成http://up-z2.qiniu.com；其他区域的要改成什么，可以访问下面被注释掉的那行网址进行查询；上传之后不显示图片则最大可能是server中qiniu中domain配置错了，或者末尾的斜杠丢失；

二、本地调试时真机调试没有数据：

(1) 地址是本地地址，即127.0.0.1，因为该地址指向自己，所以手机上的该地址也指自己，自然也连不到电脑上去；调试的话要把地址改成电脑的局域网地址，且手机和电脑在同一wifi或光猫下，即同意局域网；查询ip地址可用win+R弹出运行，输入cmd弹出命令提示符，输入ipconfig找到自己对应的网络，ipv4地址(一般是192.168开头)就是局域网地址；

(2) 电脑是windows系统的话可能需要开放防火墙和端口；win10：开始菜单-设置-搜索防火墙-进入防火墙页面-左边高级设置-入站规则-新建规则-端口-tcp-全部端口-允许访问-确定；

三、小程序分享图没有小程序码：

server\src\api\controller\qrcode.js

该文件第四行的require(“http”);改成require(“https”);

四、小程序分类的小图标不显示

1、分类图标ico大小确保正常；

2、后端管理中-店铺设置-显示设置-广告下图标要设置为显示；

3、重中之重，因为小程序端代码缺陷，需要将分类的顺序设置为1-5，才能正常显示，分类的顺序默认是100，因此几遍上一步设置为显示，也只会看到白色空挡，设置为1就会显示在第一个位置；

五、小程序商品详情页面的图片偶尔会忽大忽小：

(1) 在app.js中的data改成

data: {

deviceInfo: {},

isready:false

(2) 在pages/goods/goods.js中onShow: function(),改成：

onShow: function() {
        var that=this;
        if(app.data.isready){
            const aa = wx.createSelectorQuery();
            aa.selectAll('.wxParse-img').boundingClientRect();
            aa.exec(function (res) {
                for(var i=0;i<res[0].length;i++){
                    that.wxParseImgLoad2(res[0][i]);
                }
               })
        }else{
            let userInfo = wx.getStorageSync('userInfo');
            let info = wx.getSystemInfoSync();
            let sysHeight = info.windowHeight - 100;
            let userId = userInfo.id;
            if (userId > 0) {
                this.setData({
                    userId: userId,
                    userInfo: userInfo,
                });
            }
            this.setData({
                priceChecked: false,
                sysHeight: sysHeight
            })
            this.getGoodsInfo();
            this.getCartCount();
            setTimeout(function(){getApp().data.isready=true;},1000);
        }
    },

在GetGoodsInfo函数中的末尾WxParse.wxParse('goodsDetail’前后加上一句if，具体如下：

if(!app.data.isready){//新增
     WxParse.wxParse('goodsDetail', 'html', res.data.info.goods_desc, that);
}//新增

(3) 在pages/goods/goods.js中onUnload:function(){},改成onUnload:function(){getApp().data.isready=false;}，

(4) 在lib/wxParse/wxParse.js中在that.wxParseImgLoad = wxParseImgLoad;后面添加一句最后成这样：

that.wxParseImgLoad = wxParseImgLoad;

that.wxParseImgLoad2 = wxParseImgLoad2;

that.wxParseImgTap = wxParseImgTap;

(5) 在lib/wxParse/wxParse.js中将function wxParseImgLoad(e)函数复制一份，并命名为wxParseImgLoad2(e),且内容改成如下代码：

function wxParseImgLoad2(e) {
  var that = this;
  var tagFrom = e.dataset.from;
  var idx = e.dataset.idx;
  if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
    calMoreImageInfo2(e, idx, that, tagFrom)
  } 
}

将function calMoreImageInfo(e, idx, that, bindName)函数复制一份，并命名为calMoreImageInfo2，且内容改成如下代码：

function calMoreImageInfo2(e, idx, that, bindName) {
  var temData = that.data[bindName];
  if (temData.images.length == 0) {
    return;
  }
  var temImages = temData.images;
  //因为无法获取view宽度 需要自定义padding进行计算，稍后处理
  var recal = wxAutoImageCal(e.width, e.height,that,bindName); 
  temImages[idx].width = recal.imageWidth;
  temImages[idx].height = recal.imageheight; 
  temData.images = temImages;
  var bindData = {};
  bindData[bindName] = temData;
  that.setData(bindData);
}

六、后端管理中公告编辑不了：
在admin\src\renderer\components\Settings\NoticePage.vue文件中搜索addNotice() {
在这个函数和下一个函数里添加代码如下:

        addNotice() {
            this.dialog = true;
            this.is_add = true;
            this.noticeData.content="";//新添
            this.$forceUpdate();//新添
        },
        handleRowEdit(index, row) {
            this.noticeData.time = row.end_time;
            this.noticeData.content = row.content;
            this.noticeData.id = row.id;
            this.dialog = true;
            this.is_add = false;
            this.$forceUpdate();//新添
        },

七、增加邮件提醒功能
(1) 在server\src\api\service\文件夹下新增一个email.js文件；内容如下：

module.exports = class extends think.Service {
	    sendMail(subject, html) {
        var nodemailer = require('nodemailer');
        var smtpTransport = require('nodemailer-smtp-transport');
        smtpTransport = nodemailer.createTransport(smtpTransport({
            service: think.config('email.service'),
            auth: {
                user: think.config('email.user'),
                pass: think.config('email.pass')
            }
        }));
        smtpTransport.sendMail({ from: think.config('email.user'), to: think.config('email.recipient'), subject: subject, html: html }, function(error, response) {
            if (error) {
                console.log('mail_fail:' + error);
            }
            console.log('mail_success');
        });
    }
}

前提是在server的配置文件config.js中新增email参数，如下

    isemail:false,
        //是否开启邮件提醒，如果是，请确保以下配置正确，开启后，用户下单会收到邮件提醒；如果配置有误，会在server命令行看到报错信息；
    email: {
        service: 'QQ',//支持的邮箱列表:'1und1','AOL','DebugMail.io','DynectEmail','FastMail','GandiMail','Gmail','Godaddy','GodaddyAsia','GodaddyEurope','hot.ee','Hotmail','iCloud','mail.ee','Mail.ru','Mailgun','Mailjet','Mandrill','Naver','OpenMailBox','Postmark','QQ','QQex','SendCloud','SendGrid','SES','SES-US-EAST-1','SES-US-WEST-1','SES-EU-WEST-1','Sparkpost','Yahoo','Yandex','Zoho'
        user: '1234567890@qq.com',//邮箱用户名
        pass: 'abcdefghijklmn',//邮箱授权码，以qq为例，要开启POP3/SMTP服务，获得授权码，自行百度
        recipient: '987654321@qq.com'//收件人邮箱地址，多个收件人以英文逗号隔开
    }

否则要将文中的think.config(‘email.user’)等替换成真实的参数；

(2) 在需要发送邮件的地方填写如下代码即可：以下订单通知为例：在async submitAction() {函数最后

  // 将商品信息录入数据库
        const orderGoodsData = [];
        let orderGoodsinfo1 = '';//新增；用来拼接多个商品信息
        for (const goodsItem of checkedGoodsList) {
            orderGoodsData.push({
                user_id: think.userId,
                order_id: orderId,
                goods_id: goodsItem.goods_id,
                product_id: goodsItem.product_id,
                goods_name: goodsItem.goods_name,
                goods_aka: goodsItem.goods_aka,
                list_pic_url: goodsItem.list_pic_url,
                retail_price: goodsItem.retail_price,
                number: goodsItem.number,
                goods_specifition_name_value: goodsItem.goods_specifition_name_value,
                goods_specifition_ids: goodsItem.goods_specifition_ids
            });
            orderGoodsinfo1 = orderGoodsinfo1 + '|' + goodsItem.goods_name + '|';//新增；用来拼接多个商品信息，以|分割
        }
        await this.model('order_goods').addMany(orderGoodsData);
        await this.model('cart').clearBuyGoods();
        if (think.config('isemail')) {//新增 
            const emailSerivce = this.service('email', 'api');//新增 
            let senthtml = '客户ID：' + orderInfo.user_id + '<br>客户姓名：' + orderInfo.consignee + '<br>商品列表：' + orderGoodsinfo1 + '<br>订单金额：' + orderInfo.change_price;//新增 
            emailSerivce.sendMail('新订单', senthtml);//新增 
        }
        return this.success({
            orderInfo: orderInfo
        });

八、server中操作数据库
讲一下在server中如何访问数据库，比如发送模板消息，有些数据前文中没有，可以直接去数据库取，数据库操作被封装成模型，无需sql，格式如下(大多数框架包括微信云开发数据库封装的都和这个类似):

let user = await this.model('user').where({
      id: orderInfo.user_id
}).find();

1、this.model(‘user’)中的user是数据库中去掉前缀_之后的表名，即对应hiolabs_user；

2、where相当于sql的查询条件，上面的条件是user表中id字段等于某个值(orderInfo.user_id是传进去的参数);如果有多个条件，在前一个条件后加,然后就可以再写一条，如:

let user = await this.model('user').where({
      id: orderInfo.user_id,
      is_delete:0
}).find();

3、.find()是在结果集中取一条数据，适合按id查询，一般只有一条数据；如果需要返回所有满足的结果，要将.find()换成.select();
4、如果不需要返回全部字段，想指定某个或某几个字段，可以在.find()前面加上.field(),用法如下:

 let orderInfo = await this.model('order').where({
       id: orderId
}).field('user_id').find();

只返回user_id字段，因此后面用orderInfo.user_id就是用户的id了；如果想返回多个字段，同样在user_id后加,再写新的字段名即可

九、图片存储到自己的服务器：
(1) 为了尽量减少工作量，同时又能实现把原来存储到七牛云的图片改变存储到自己服务器，所以要在自己的服务器里模仿原七牛云的功能；
(2) 服务器：首先要在服务器建立站点，建议使用Apache，不用处理访问跨域的问题，否则要自行查找如何解决跨域问题；网站最好部署ssl，开启https访问；否则小程序端分享商品时会不显示；需要安装PHP，版本任意；网站根目录要设置权限，如果是linux系统最好666及以上权限，如777，windows系统如果使用了iis需要在iis中设置权限；在网站根目录删掉其他index文件，新建index.php文件；内容如下：

<?php
header('Access-Control-Allow-Origin: *');//*表示允许所有IP访问，如果怕被攻击，这里可以改成后端管理所在服务器的ip地址，即仅限该ip地址能存储图片；
function uuid()  {
	$chars = md5(uniqid(mt_rand(), true));  
	$uuid = substr ( $chars, 0, 8 ) . '-'. substr ( $chars, 8, 4 ) . '-' . substr ( $chars, 12, 4 ) . '-'. substr ( $chars, 16, 4 ) . '-'. substr ( $chars, 20, 12 );  
    return $uuid ;  
}
if($_POST['token']){
	if($_POST['token']=='token123456'){//token123456替换成自己设置的token；和server中配置文件中的token保持一致；
		$file = $_FILES['file'];
		$path = uuid();
		if(file_exists($path)){unlink($path);}
		move_uploaded_file($_FILES['file']['tmp_name'], './'.$path);
		$data=array("key"=>$path);
        print_r(json_encode($data));
	}}else{echo '测试通过';}
?>

(3)将server的配置文件中的qiniu修改成以下内容：

   qiniu: {
        token: 'token123456',                // 请填自己的token,和服务器index.php中的该值保持一致
        domain: 'https://xxx.xxx.xxx/'   // 请填自己的图片存放站点,也是index.php的根目录,直接访问会显示测试通过，末尾的/不能省略
    },

这里要配置token，和index.php中的token保持一致即可，如若不修改，可能会被人恶意存储图片；配置的domain即是第二步中站点的https地址，也是index.php的根目录，直接访问会显示测试通过；
(4)修改server\src\admin\service\qiniu.js，将以下内容替换：

const qiniu = require('qiniu');
module.exports = class extends think.Service {
    async getQiniuToken() {
        // let secretKey = think.config('qiniu.secret_key');
        // let bucket = think.config('qiniu.bucket');
        let domain = think.config('qiniu.domain');//保留这一行
        // let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
        // let currentTime = parseInt(new Date().getTime() / 1000) + 600;
        //let key = think.uuid(32);
        // let options = {
        //     scope: bucket,
        //     deadline: currentTime,
        //     saveKey: key
        // };
        // let putPolicy = new qiniu.rs.PutPolicy(options);
        let uploadToken = think.config('qiniu.token');//修改这一行
        let data = {
            uploadToken: uploadToken,
            domain: domain,
        };
        return data;
    }
};

即保留一行，修改一行，中间其他内存注释掉；

(5)至此修改已经完成，但要注意原先的商品图片依然在原来的七牛云上，重新上传才会出现在自己的服务器中；

十、增加伪评论功能：
修改后完整版在上方百度网盘里
效果图如下:

在这里插入图片描述

(1) 数据库：

新建一张表用来存放评论：{{前缀}}_comment；

评论里需要放置图片的话，就再建一张表：{{前缀}}_goods_comment_img；

SQL代码见网盘，替换文件如下：

(2) admin端：

因为评论功能加在商品添加/编辑页面，所以需要修改：

admin\src\renderer\components\Goods\GoodsAddPage.vue

(3) server端：

server\src\admin\controller\goods.js

server\src\admin\controller\specification.js

server\src\api\controller\goods.js

(4)小程序端：

miniprogram\pages\goods\goods.wxml

miniprogram\pages\goods\goods.js

(有两个版本，一个是修复过图片预览返回大小会变化的bug的js

另一个是源码版本的js，无法混用，会报错；)

miniprogram\pages\goods\goods.wxss

(本人不擅长样式文件，新增的样式为comment开头，可自行编辑)

因本人时间有限，有许多console.log保留在代码里，可自行删除，个别函数因在原函数基础上改动，因此名称直接在原函数后加1之类，可自行修改；

(5)小程序端还有个时间未加在上面，如果需要的话，可以在wxml中搜索item.body，将这一行view控件复制，并将item.body改成item.time即可，然后在设置其样式；

十一、删除七牛云图片
(1)server\src\admin\service\qiniu.js，在getQiniuToken()函数下面新建一个函数：

    async deleteqiniu(key) {
        let accessKey = think.config('qiniu.access_key');
        let secretKey = think.config('qiniu.secret_key');
        let bucket = think.config('qiniu.bucket');
        let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
        let config = new qiniu.conf.Config();
        switch(think.config('qiniuHttps.zoneNum')){
            case 0:config.zone = qiniu.zone.Zone_z0;break;
            case 1:config.zone = qiniu.zone.Zone_z1;break;
            case 2:config.zone = qiniu.zone.Zone_z2;break;
            case 3:config.zone = qiniu.zone.Zone_na0;break;
            default:config.zone = qiniu.zone.Zone_z2;
        }
        let bucketManager = new qiniu.rs.BucketManager(mac, config);
        bucketManager.delete(bucket, key, function(err, respBody, respInfo) {
            if (err) {console.log(err);return false;
            } else {console.log(respInfo.statusCode);console.log(respBody);return true;
            }
        });
    }

该函数需要参数key即图片名称(32位随机字符)，成功删除返回true，否则返回false；

(2)在需要删除图片的地方引用并传参，举例如下：

在server\src\admin\controller\category.js(商品分类相关操作)

在deleteBannerImageAction函数中调用以删除分类图片：

    async deleteBannerImageAction() {
        let id = this.post('id');
        //删图片操作start
        let data_temp = await this.model('category').where({ id: id }).find();//获取图片地址
        if (data_temp.img_url) { //分类图片
            let key = data_temp.img_url;
            let index = key.lastIndexOf("\/");
            key = key.substring(index + 1, key.length);//将图片名称分离出来
            await this.service('qiniu').deleteqiniu(key);//调用删除函数;
        }
        //删图片操作end
        await this.model('category').where({
            id: id
        }).update({
            img_url: ''
        });
        return this.success();
    }

以及在deleteIconImageAction函数中调用以删除分类图标：

    async deleteIconImageAction() {
        let id = this.post('id');
        //删图片操作start
        let data_temp = await this.model('category').where({ id: id }).find();//获取图片地址
        if (data_temp.icon_url) { //分类图标
            let key = data_temp.icon_url;
            let index = key.lastIndexOf("\/");
            key = key.substring(index + 1, key.length);//将图片名称分离出来
            await this.service('qiniu').deleteqiniu(key);//调用删除函数;
        }
        //删图片操作end
        await this.model('category').where({
            id: id
        }).update({
            icon_url: ''
        });
        return this.success();
    }

以及在destoryAction函数(直接删掉分类)中调用删掉分类图片和图标：

    async destoryAction() {
        const id = this.post('id');
        let data = await this.model('category').where({
            parent_id: id
        }).select();
        if (data.length > 0) {
            return this.fail();
        } else {
            //删图片操作start
            let data_temp = await this.model('category').where({ id: id }).find();
            if (data_temp.img_url) { //分类图片
                let key = data_temp.img_url;
                let index = key.lastIndexOf("\/");
                key = key.substring(index + 1, key.length);
                await this.service('qiniu').deleteqiniu(key);
            }
            if (data_temp.icon_url) { //分类图标
                let key = data_temp.icon_url;
                let index = key.lastIndexOf("\/");
                key = key.substring(index + 1, key.length);
                await this.service('qiniu').deleteqiniu(key);
            }
            //删图片操作end
            await this.model('category').where({
                id: id
            }).limit(1).delete();

            return this.success();
        }
    }

(3)其他删除图片例如商品编辑页面(goods.js)和广告编辑页面(ad.js)均大同小异，可以结合数据库字段名实际情况修改上文中的img_url等；

十二、删除自定义图片存储服务器中图片
(1)图片存储服务器的站点目录中新建一个php文件：delete.php；并设置该文件权限；
(2)delete.php内容如下：

<?php
header('Access-Control-Allow-Origin: *');
if($_POST['token']){
    if($_POST['token']=='token123456'){//token123456替换成自己设置的token
	    $result=0;
	    if(unlink($_POST['key']))$result=1;
	    $data=array("result"=>$result);
        print_r(json_encode($data));
    }
}else{echo '测试通过';}?>

(3)server\src\admin\service\token.js，(因为这个文件里有rp模块) ，在getAccessToken()函数下面新建一个函数：

    async deleteimg(key) {
        const options = {
            method: 'POST',
            url: think.config('qiniu.domain')+'delete.php',
            form: {
                token: think.config('qiniu.token'),
                key: key,
            }
        };
        let sessionData = await rp(options);
        sessionData = JSON.parse(sessionData);
        let result = sessionData.result;
        console.log(result);
        return result;
    }

(4)用法同 {十一、删除七牛云图片} ，但是要将

await this.service('qiniu').deleteqiniu(key);

改成

await this.service('token').deleteimg(key);

(5)未测试，有问题联系我(Q912104410);

十三、直接分享到朋友圈
(1)在小程序端需要分享的页面的js中的onload函数里加入如下代码：

    wx.showShareMenu({//开启安卓端转发朋友圈功能
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    })

(2)然后在js中新建一个函数：

  onShareTimeline: function () {
    return {
      title:'分享的标题'
    }
  }

其他参数具体可看腾讯文档

(3)基础库要大于等于2.11.3；如下图

在这里插入图片描述

GZLEO77

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
海风小店部署教程

海风小店部署教程2020年8月7日对你二不完1. 源码地址：官网地址：http://hiolabs.com/?cat=4海鸥实验室 GitHub：微信小程序：https://github.com/iamdarcy/hioshop-miniprogram 后台管理：https://github.com/iamdarcy/hioshop-admin 服务端：https://github.com/iamdarcy/hioshop-server 官网教学视频：服务端：https...
复制链接

扫一扫