番外-三国志14信息查询小程序（历史武将信息一览）制作上线过程

说明：文章中为主要代码

小程序码：

1，微信小程序注册及基本框架搭建

10分钟入门 - 微信小程序开发

2，底部tab栏

我打算将主要内容分为三部分，武将数据页显示列表数据，剧本与地图页显示一些剧本图片和收入图片等，关于页显示小程序说明。
（1）打开app.json文件，修改tabBar的内容

代码如下：

"tabBar": {
    "color": "#bfc1ab",
    "selectedColor": "#13b11c",
    "backgroundColor": "#381B25",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "武将数据"
      },
      {
        "pagePath": "pages/my/details",
        "iconPath": "image/icon_map.png",
        "selectedIconPath": "image/icon_map_HL.png",
        "text": "剧本与地图"
      },
      {
        "pagePath": "pages/about/about",
        "iconPath": "image/icon_about.png",
        "selectedIconPath": "image/icon_about_HL.png",
        "text": "关于"
      }
    ]
  },

（2）结合上面的代码，新建文件夹和文件

每个文件夹里包含.js，.json，.wxml，wxss这四个文件

3，武将数据页（index）

index.wsml代码：

<scroll-view class="table" scroll-x="true" scroll-y="true" 
enable-flex="true" >
  <view class="search">
      <view class="search-header">
        <input class="search-input" bindinput='query' bindblur="query" placeholder="按武将名称或个性全称搜索，有建议请反馈"/>
        <image src="../../image/search.png"/>
      </view>
    </view>
 <view class="bg-w">

 <view class="th" bindtap="orderBy" data-name="name">武将</view>
 <view class="th" bindtap="orderBy" data-name="tongshuai">统率</view>
 <view class="th" bindtap="orderBy" data-name="wuli">武力</view>
 <view class="th" bindtap="orderBy" data-name="zhili">智力</view>
 <view class="th" bindtap="orderBy" data-name="zhengzhi">政治</view>
 <view class="th" bindtap="orderBy" data-name="meili">魅力</view>
 <!-- <view class="th ">登场年</view>
 <view class="th ">184/1黄巾</view>
 <view class="th ">190/1反董</view>
 <view class="th ">194/6群雄</view>
 <view class="th ">200/1官渡</view>
 <view class="th ">207/9三顾</view>
 <view class="th ">217/7汉中</view>  -->
 <!-- <view class="th ">221/7夷陵</view> -->
 <!-- <view class="th ">227/2出师</view> -->
 <!-- <view class="th ">249/1正始</view> -->
 </view>
 <view wx:for="{{goodsList}}" wx:key="index" class="table" >
 <view class="tr bg-g" bindtap="onGoodsDetail" data-all="{{item}}"  data-name="{{item.name}}">
  <view class="td" >{{item.name}}</view>
 <view class="td">{{item.tongshuai}}</view>
 <view class="td">{{item.wuli}}</view>
 <view class="td">{{item.zhili}}</view>
 <view class="td">{{item.zhengzhi}}</view>
 <view class="td">{{item.meili}}</view>
 <!-- <view class="td">{{item.dengchang}}</view>
 <view class="td">{{item.hj}}</view>
 <view class="td">{{item.fd}}</view>
 <view class="td">{{item.qx}}</view>
 <view class="td">{{item.gd}}</view>
 <view class="td">{{item.sg}}</view>
 <view class="td">{{item.hz}}</view> -->
 <!-- <view class="td">{{item.yl}}</view> -->
 <!-- <view class="td">{{item.cs}}</view> -->
 <!-- <view class="td">{{item.zs}}</view> -->
 </view>
 </view>
</scroll-view>

index.js代码：

Page({
  data: {
      goodsList:[], // 列表数组
      // 请求参数对象
      queryObj:{
        query: '',   // 查询关键词
        cid: '',   // 分类Id
        pagenum: 1,// 页码值
        pagesize: 13 // 每页显示多少条数据
      },
      key:'',
      scrollId:'m1',
      // 总数量，用来实现分页
      total: 0,
      // 是否正在请求数据
      isloading: false,
      shows: false, //控制下拉列表的显示隐藏，false隐藏、true显示
      order:"",
      orderType:"ASC",
      selectDatas: ['名称', '个性'], //下拉列表的数据
      indexs: 0, //选择的下拉列 表下标,
  },
  //获取列表数据方法
  getGoodsList(reachBottom) {
    this.setData({
        isLoading:true
      })
      let that=this
      wx.showLoading({
        title: '数据加载中...',
      })
      wx.request({
        url: `********`,//你的后台url地址
        data: {
          order:this.data.order,
          key:this.data.key,
          page:this.data.queryObj.pagenum,
          intPageSize:this.data.queryObj.pagesize,
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        method: "GET",
        success(result) {
          // that.setData({
          //   goodsList:result.data.response.data
          // })
    
        if(reachBottom){
          that.setData({
            goodsList: [...that.data.goodsList, ... result.data.response.data],
              total: result.data.response.dataCount,
              // scrollId:'m'+that.data.queryObj.pagenum
            }) 
        }   
        },
        fail(error) {
          console.log('request fail', error);
        },
        // 无论获取数据是否成功都会执行该方法
        complete:()=>{
          wx.hideLoading() // 关闭loading
          this.setData({
            isLoading:false
          })
        }
      })
    },
     /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
    // 判断是否还有下一页数据
    if (this.data.queryObj.pagenum * this.data.queryObj.pagesize >= this.data.total) {
    wx.showLoading({
        title: '数据加载完毕！',
      })
      wx.hideLoading() // 关闭loading
      return 
     }
    // 判断是否正在请求其它数据，如果是，则不发起额外的请求
      if(this.data.isLoading) return 
      let pagenum = this.data.queryObj.pagenum
      this.setData({
        queryObj:{
          pagenum:pagenum += 1// 让页码值自增 +1
        }
      })
      this.getGoodsList(true)// 重新获取列表数据
    },
     // 点击下拉显示框
  selectTaps() {
    this.setData({
      shows: !this.data.shows,
    });
  },
  // 点击下拉列表
  optionTaps(e) {
    let Indexs = e.currentTarget.dataset.index; //获取点击的下拉列表的下标
    console.log(Indexs)
    this.setData({
      indexs: Indexs,
      shows: !this.data.shows
    });

  },
    //查询
    query(e){
      let key=''
      if (e&&e.detail && e.detail.value != "") {
        key = e.detail.value
      }
      this.setData({
        key:key,
        goodsList:[],
        queryObj:{
          pagenum:1,
          pagesize: 15 // 每页显示多少条数据
        }
      })
      this.getGoodsList(true)
    },
    // 点击详情
  onGoodsDetail: function (e) {
    var name=e.currentTarget.dataset.name
    var data=JSON.stringify(e.currentTarget.dataset)
     wx.navigateTo({
      url:'../details/details?name='+name+'&data='+data
     })  
   },
   // 排序
   orderBy:function(e){
    var name=e.currentTarget.dataset.name
    var orderType="DESC"
    if(this.data.orderType=="DESC"){
      orderType="ASC"
    }else{
      orderType="DESC"
    }
    this.setData({
      order: name+" "+orderType,
      orderType:orderType
    });
    console.log(name)
    this.query()// 重新获取列表数据
   },
      /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
    // 调用获取列表数据的方法
       this.getGoodsList(true)
     },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    // onPullDownRefresh: function () {
    //   // 1. 重置关键数据
    //   let pagenum = 'queryObj.pagenum'
    //   this.setData({
    //     [pagenum]:1,
    //     total :0,
    //     isloading : false,
    //     goodsList : []
    //   })
    //   // 2. 重新发起请求 并关闭下拉窗口
    //   this.getGoodsList(() => wx.stopPullDownRefresh())
    // },
  })
  

index.wss代码：

.table {
    display: flex;
    flex-direction: column;     /* 排列形式: 向下 */
    margin-top: 0rpx;
    /* margin-bottom: 50px; */
}
.back{
  display: flex;
  flex-direction: column;     /* 排列形式: 向下 */
  margin-top: 0rpx;
  height:1100rpx;
}
 .tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 3rem;
  align-items: center;
 }
 .td {
  width:20%;
  justify-content: center;
  text-align: center;
 }
 .bg-w{
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 3rem;
  height: 3rem;
  align-items: center;
  background: snow;
 }
 .bg-g{
  background: rgb(220,222,206);
 }
 .th {
  width: 20%;
  justify-content: center;
  background: #643233;
  color: #fff;
  display: flex;
  height: 3rem;
  border: 1px solid #000;
  align-items: center;
 }
 /*搜索样式  */
.search{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  border-bottom: 2rpx solid #eeeeee;
  z-index: 99;
}
.search-header{
  width: 95%;
  height: 70rpx;
  background-color: #eeeeee;
  display: flex;
  justify-self: start;
  align-items: center;
  border-radius: 10rpx;
  margin: 0 auto;
  margin-top: 15rpx;
}
.search-header image{
  width: 50rpx;
  height: 50rpx;
  padding: 0 20rpx;
}
.search-input{
  text-align: center;
  width: 80%;
  height: 70rpx;
  font-size: 24rpx;
}

剧本与地图页，关于页（略，没什么东西，没什么好说的）

4，点击某一行，查看武将详细信息

即detail文件夹内容

detail.wsml代码：

<view>
<view>
<view class="detailLeft">
<image  wx:for="{{headPortrait}}" wx:key="i" wx:if="{{headPortrait}}" src="{{item}}"  bindtap='previewImage'  class="personPng"/>
</view>
<view  class="detailRight" >
<view class="titleBack">
<text class="title" >{{name}}</text><text class="title" wx:if="{{isAlias}}">（{{alias}}）</text>
</view>
<view class="echart" >
 <ec-canvas id="mychart-dom-graph"  bindtap="onMoreDetail" canvas-id="mychart-graph" ec="{{ ec }}"></ec-canvas>
 </view>
<view class="infoLeft">
  <view  class="personalityTags" style="background:{{gexing1Color}}" wx:if="{{gexing1!='x'}}" 
  bindtouchstart="mytouchstart" bindlongtap="mylongtap"  data-name="{{gexing1}}"
    bindtouchend="mytouchend" bindtap="mytap"><text >{{gexing1}}</text></view>
  <view class="personalityTags" style="background:{{gexing2Color}}" wx:if="{{gexing2!='x'}}" bindlongtap="mylongtap" data-name="{{gexing2}}">  <text>{{gexing2}}</text></view>
  <view class="personalityTags" style="background:{{gexing3Color}}" wx:if="{{gexing3!='x'}}" bindlongtap="mylongtap" data-name="{{gexing3}}">  <text>{{gexing3}}</text></view>
  <view class="personalityTags" style="background:{{gexing4Color}}" wx:if="{{gexing4!='x'}}" bindlongtap="mylongtap" data-name="{{gexing4}}"> <text>{{gexing4}}</text></view>
   <view class="personalityTags" style="background:{{gexing5Color}}" wx:if="{{gexing5!='x'}}"
   bindlongtap="mylongtap" data-name="{{gexing5}}"> <text>{{gexing5}}</text></view>
</view>
<view class="infoRight">
<view class="personalityTags" style="background:#685A2E" ><text>{{zhuyi}}</text></view>
<view class="personalityTags2" style="background:#685A2E" ><text>{{zhengce}}{{zhengcedengji}}级</text></view>
<view class="personalityTags" style="background:#685A2E" ><text>生年:{{shengnian}}年</text></view>
<view class="personalityTags" style="background:#685A2E" ><text>登场:{{dengchang}}年</text></view>
<view class="personalityTags" style="background:#685A2E" ><text>卒年:{{zunian}}年</text></view>
</view>
</view>
</view>

<view  class="detailContent">
<view class="inDetailContent">
  <!-- <image  wx:for="{{headPortrait_n}}" wx:key="i" wx:if="{{headPortrait_n}}" src="{{item}}"  class="personPng_n"/> -->
<view class="contentTitle">

<!-- <view class="titleName">
{{name}}
</view> -->
<!-- <view style="padding-left:50rpx;">字    【{{alias}}】<image src="../../image/location.png" style=" height:50rpx;width:50rpx;" bindtap="location"/></view> -->
<!-- <view style="padding-left:50rpx;"><image src="../../image/location.png" style=" height:50rpx;width:50rpx;" bindtap="location"/></view> -->
<text style="font-size:12px;color:#fff">简介：</text>
</view>
<view class="contentContent">
  <form bindsubmit="formSubmit">
<view style="height:50rpx">
  <textarea  	disabled="{{editState}}" name="biography1" space="nbsp" value="{{biography1}}" style="font-size:12px;width:100%;height:120%;background:{{bgEdit1}};color:#fff" maxlength="50" user-select="true">
  </textarea>
</view>
<view style="height:255rpx">
  <text space="nbsp" style="font-size:12px;"><text style="font-size:12px;color:green">演：</text></text>
  <textarea disabled="{{editState}}" name="biography2"  space="nbsp" value="{{biography2}}" style="font-size:12px;width:100%;height:210rpx;background:{{bgEdit2}};color:#fff" maxlength="200" user-select="true">
  </textarea>
</view>
<view style="height:180rpx">
  <text space="nbsp" style="font-size:12px;"><text style="font-size:12px;color:red">史：</text></text>
  <textarea disabled="{{editState}}" name="biography3" space="nbsp" value="{{biography3}}" style="font-size:12px;width:100%;height:150rpx;background:{{bgEdit3}};color:#fff" maxlength="200" user-select="true">
  </textarea>
</view>
<!-- <view style="background:#743E3E">
<button form-type="submit" 	size="mini" style="top:160rpx;float:right;padding-right:50rpx">提交</button>
<button bindtap="editState" size="mini" style="top:160rpx;float:right;padding-right:50rpx">编辑</button>
</view> -->
</form>
</view>
</view>
</view>

</view>

detail.js代码：

import * as echarts from '../../ec-canvas/echarts.min';
const app = getApp();
const gexingList = [......略]
const gexingList2=[......略]
const allPerson = [......略]
var Person = {
  tongshuai: 0,
  wuli: 0,
  zhili: 0,
  zhengzhi: 0,
  meili: 0
}
//五维图（雷达图）
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  var i = -1;
  var arr1 = []
  arr1.push(Person.tongshuai)
  arr1.push(Person.meili)
  arr1.push(Person.zhengzhi)
  arr1.push(Person.zhili)
  arr1.push(Person.wuli)
  var option = {
    backgroundColor: "#4F2D29",   //图表背景颜色
    color: ['gray'],   //线条颜色
    tooltip: {
      trigger: 'axis'
    },
    radar: [
      {
        indicator: [
          { name: '统率', max: 100, },
          { name: '魅力', max: 100 },
          { name: '政治', max: 100 },
          { name: '智力', max: 100 },
          { name: '武力', max: 100 }
        ],
        //雷达图圈数
        splitNumber: 1,
        //半径，可放大放小雷达图
        radius: 32,
        //调整雷达图的位置(左右，上下)
        center: ['50%', '57%'],
        name: {
          rich: {
            a: {
              color: '#B8A96E',    //五维名称文本颜色
              lineHeight: 8
            },
            b: {
              color: '#fff',   //五维数值文本颜色
              align: 'center',
              padding: 1,
              borderRadius: 0
            }
          },
          formatter: (a, b) => {
            i++;
            return `{a|${a}}\n{b|${arr1[i]}}`
          }
        }
      },
    ],
    series: [
      {
        type: 'radar',
        tooltip: {
          trigger: 'item'
        },
        areaStyle: {
          color: '#A8694A'    //雷达面积颜色
        },
        data: [
          {
            value: [Person['tongshuai'], Person['meili'], Person['zhengzhi'], Person['zhili'], Person['wuli']],
            name: '五维图',
            symbolSize: 0    //焦点大小
          }
        ]
      },
    ]
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    headPortrait: '',
    headPortrait_n:'',
    name: '',
    allData: [],
    ec: null,
    zhuyi: '',
    zhengce: '',
    zhengcedengji: '',
    shengnian: '',
    dengchang: '',
    zunian: '',
    gexing1: false,
    gexing2: false,
    gexing3: false,
    gexing4: false,
    gexing5: false,
    gexing1Color: '',
    gexing2Color: '',
    gexing3Color: '',
    gexing4Color: '',
    gexing5Color: '',
    alias: '',
    biography1: '',
    biography2: '',
    biography3: '',
    xiangxing: '',
    xueyuan: '',
    fuqin: '',
    muqin: '',
    shidai: '',
    peiou:'',
    yxd: '',
    zx: '',
    zf: '',
    like1: '',
    like2: '',
    like3: '',
    like4: '',
    like5: '',
    like6: '',
    like7: '',
    like8: '',
    dislike1: '',
    dislike2: '',
    dislike3: '',
    dislike4: '',
    dislike5: '',
    dislike6: '',
    dislike7: '',
    dislike8: '',
    thisData: '',
    hj:'',
    fd:'',
    qx:'',
    gd:'',
    sg:'',
    hz:'',
    yl:'',
    cs:'',
    zs:'',
    editState: true,
    bgEdit1: '#743E3E',
    bgEdit2: '#743E3E',
    bgEdit3: '#743E3E',
    isAlias: false,
    beLike:'',
    beDisLike:'',
  },
  //放大图片
  previewImage: function (e) {
    // let index = e.target.dataset.index;
    var img = this.data.headPortrait;
    console.log(img)
    wx.previewImage({
      // current: img[index],
      urls: img,
    })
    // var imgUrl = this.data.headPortrait;
    // wx.previewImage({
    //   urls: [imgUrl], // 需要预览的图片http链接列表
    //   current: '', // 当前显示图片的http链接
    // })
  },
  //开始编辑
  editState() {
    this.setData({
      editState: false,
      bgEdit1: 'rgba(255,0,0,0.1)',
      bgEdit2: 'rgba(0,255,0,0.1)',
      bgEdit3: 'rgba(0,0,255,0.1)'
    })
    wx.showToast({
      title: '开始编辑',
      icon: 'success',
      duration: 2000
    })
  },
  //编辑提交
  formSubmit(e) {
    let para = this.data.thisData
    let that = this
    para.biography1 = e.detail.value.biography1
    para.biography2 = e.detail.value.biography2
    para.biography3 = e.detail.value.biography3
    wx.request({
      url: `***`,//你的后台url地址
      data: para,
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      method: "POST",
      success(result) {
        console.log(result)
        that.setData({
          editState: true,
          bgEdit1: '#743E3E',
          bgEdit2: '#743E3E',
          bgEdit3: '#743E3E'
        })
        wx.showToast({
          title: '提交成功，感谢',
          icon: 'success',
          duration: 2000
        })
      },
      fail(error) {
        console.log('request fail', error);
      }
    })
  },
  //触摸开始
  mytouchstart: function (e) {
    console.log(e.timeStamp + '- touch start')
  },
  //长按事件mylongtap: function(e){    console.log(e.timeStamp + '- long tap')
  mytouchend: function (e) {
    console.log(e.timeStamp + '- touch end')
  },
  mytap: function (e) {
    console.log(e.timeStamp + '- tap')
  },
  mylongtap: function (e) {
    var name=e.currentTarget.dataset.name 
    var introduce=name
    for (let i = 0; i < gexingList2.length; i++) {
      if (gexingList2[i]["name"] == name) {
        introduce=gexingList2[i]["introduce"]
         break;
      }
      console.log(0)
    }
wx.showModal({
  title: name,
  content: introduce,
  showCancel:false
})
  },
  onLoad: function (options) {
    var name = options.name
    console.log(options)
    var data = JSON.parse(options.data)
    var thisData = data.all
    var that = this
    var imgUrl =  '***'  + name + '.jpg'
    var imgUrl_n =  '***'  + name + 'n.jpg'||''
    // var imgUrl2 = '***' + name+'(2)' + '.jpg'
    imgUrl = encodeURI(imgUrl)
    imgUrl_n = encodeURI(imgUrl_n)
    // imgUrl2 = encodeURI(imgUrl2)
    for (let i = 0; i < allPerson.length; i++) {
      if (allPerson[i].name == name) {
        Person.tongshuai = allPerson[i].tongshuai;
        Person.wuli = allPerson[i].wuli;
        Person.zhili = allPerson[i].zhili;
        Person.zhengzhi = allPerson[i].zhengzhi;
        Person.meili = allPerson[i].meili;
        Person.gexing1 = allPerson[i].gexing1;
        Person.gexing2 = allPerson[i].gexing2;
        Person.gexing3 = allPerson[i].gexing3;
        Person.gexing4 = allPerson[i].gexing4;
        Person.gexing5 = allPerson[i].gexing5;
        Person.zhuyi = allPerson[i].zhuyi;
        Person.zhengce = allPerson[i].zhengce;
        Person.zhengcedengji = allPerson[i].zhengcedengji;
        Person.shengnian = allPerson[i].shengnian;
        Person.dengchang = allPerson[i].dengchang;
        Person.zunian = allPerson[i].zunian;
      }
    }
    this.setData({
      ec: {
        onInit: initChart
      },
      thisData: thisData
    })
    wx.request({
      url: `***`,//你的后台url地址
      data: {
        key: name
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      method: "GET",
      success(result) {
        let data = result.data.response[0]
        let alias = (data.alias != null && data.alias != 'null') ? data.alias : '无记载'
        if (alias != "无记载") {
          that.setData({
            isAlias: true
          })
        }
        let biography1 = data.biography1 != null ? data.biography1 : '暂无数据'
        let biography2 = data.biography2 != null ? data.biography2 : '暂无数据'
        let biography3 = data.biography3 != null ? data.biography3 : '暂无数据'
        that.setData({
          alias: alias,
          biography1: biography1,
          biography2: biography2,
          biography3: biography3,
          xiangxing: data.xiangxing,
          xueyuan: data.xueyuan,
          fuqin: data.fuqin,
          muqin: data.muqin,
          shidai: data.shidai,
          peiou:data.peiou,
          yxd: data.yxd,
          zx: data.zx,
          zf: data.zf,
          like1: data.like1,
          like2: data.like2,
          like3: data.like3,
          like4: data.like4,
          like5: data.like5,
          like6: data.like6,
          like7: data.like7,
          like8: data.like8,
          dislike1: data.dislike1,
          dislike2: data.dislike2,
          dislike3: data.dislike3,
          dislike4: data.dislike4,
          dislike5: data.dislike5,
          dislike6: data.dislike6,
          dislike7: data.dislike7,
          dislike8: data.dislike8,
          hj:data.hj,
          fd:data.fd,
          qx:data.qx,
          gd:data.gd,
          sg:data.sg,
          hz:data.hz,
          yl:data.yl,
          cs:data.cs,
          zs:data.zs,
        })
        let gexing1Color = "#212F37"
        let gexing2Color = "#212F37"
        let gexing3Color = "#212F37"
        let gexing4Color = "#212F37"
        let gexing5Color = "#212F37"
        for (let i = 0; i < gexingList.length; i++) {
          if (Person.gexing1 == gexingList[i].name) {
            if (gexingList[i].type == 1) {
              gexing1Color = '#594800'
            } else {
              gexing1Color = '#3F2521'
            }
          }
          if (Person.gexing2 == gexingList[i].name) {
            if (gexingList[i].type == 1) {
              gexing2Color = '#594800'
            } else {
              gexing2Color = '#3F2521'
            }
          }
          if (Person.gexing3 == gexingList[i].name) {
            if (gexingList[i].type == 1) {
              gexing3Color = '#594800'
            } else {
              gexing3Color = '#3F2521'
            }
          }
          if (Person.gexing4 == gexingList[i].name) {
            if (gexingList[i].type == 1) {
              gexing3Color = '#594800'
            } else {
              gexing4Color = '#3F2521'
            }
          }
          if (Person.gexing5 == gexingList[i].name) {
            if (gexingList[i].type == 1) {
              gexing5Color = '#594800'
            } else {
              gexing5Color = '#3F2521'
            }
          }
        }
        that.setData({
          headPortrait_n: [imgUrl_n],
          headPortrait: [imgUrl],
          name: name,
          zhuyi: Person.zhuyi,
          zhengce: Person.zhengce,
          zhengcedengji: Person.zhengcedengji,
          shengnian: Person.shengnian,
          dengchang: Person.dengchang,
          zunian: Person.zunian,
          gexing1: Person.gexing1,
          gexing2: Person.gexing2,
          gexing3: Person.gexing3,
          gexing4: Person.gexing4,
          gexing5: Person.gexing5,
          gexing1Color: gexing1Color,
          gexing2Color: gexing2Color,
          gexing3Color: gexing3Color,
          gexing4Color: gexing4Color,
          gexing5Color: gexing5Color,
        })
        //被亲爱
        wx.request({
          url: `***`,//你的后台url地址
          data: {
            name: name,
            type:"like"
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          method: "GET",
          success(result2) {
            var nameArray=""
            for(let i=0;i<result2.data.pageCount;i++){
              nameArray=nameArray+result2.data.response[i].Name+"、"
            }
            that.setData({
              beLike:nameArray
            })
          }
        })
        //被厌恶
        wx.request({
          url: `***`,//你的后台url地址
          data: {
            name: name,
            type:"dislike"
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          method: "GET",
          success(result2) {
            var nameArray=""
            for(let i=0;i<result2.data.pageCount;i++){
              nameArray=nameArray+result2.data.response[i].Name+"、"
            }
            that.setData({
              beDisLike:nameArray
            })
          }
        })
      },

      fail(error) {
        console.log('request fail', error);
      }
    })
  },
  //更多详情
  onMoreDetail: function (e) {
    var data = this.data
    var xiangxing=data.xiangxing
    var xueyuan=data.xueyuan
    var fuqin=data.fuqin
    var muqin=data.muqin
    var shidai=data.shidai
    var peiou=data.peiou
    var yxd=data.yxd
    var zx=data.zx
    var zf=data.zf
    var like1=data.like1
    var like2=data.like2
    var like3=data.like3
    var like4=data.like4
    var like5=data.like5
    var like6=data.like6
    var like7=data.like7
    var like8=data.like8
    var dislike1=data.dislike1
    var dislike2=data.dislike2
    var dislike3=data.dislike3
    var dislike4=data.dislike4
    var dislike5=data.dislike5
    var dislike6=data.dislike6
    var dislike7=data.dislike7
    var dislike8=data.dislike8
    var hj=data.hj
    var fd=data.fd
    var qx=data.qx
    var gd=data.gd
    var sg=data.sg
    var hz=data.hz
    var yl=data.yl
    var cs=data.cs
    var zs=data.zs
    var beLike=data.beLike
    var beDisLike=data.beDisLike
    wx.navigateTo({
      url: '../moreDetails/moreDetails?xiangxing=' + xiangxing+"&zx="+zx
      +"&zf="+zf
      +"&xueyuan="+xueyuan
      +"&fuqin="+fuqin
      +"&muqin="+muqin                         
      +"&shidai="+shidai
      +"&peiou="+peiou
      +"&yxd="+yxd
      +"&like1="+like1
      +"&like2="+like2
      +"&like3="+like3
      +"&like4="+like4
      +"&like5="+like5
      +"&like6="+like6
      +"&like7="+like7
      +"&like8="+like8
      +"&dislike1="+dislike1
      +"&dislike2="+dislike2
      +"&dislike3="+dislike3
      +"&dislike4="+dislike4
      +"&dislike5="+dislike5
      +"&dislike6="+dislike6
      +"&dislike7="+dislike7
      +"&dislike8="+dislike8
      +"&hj="+hj
      +"&fd="+fd
      +"&qx="+qx
      +"&gd="+gd
      +"&sg="+sg
      +"&hz="+hz
      +"&yl="+yl
      +"&cs="+cs
      +"&zs="+zs
      +"&beLike="+beLike
      +"&beDisLike="+beDisLike
    })
  },
  //点击定位
  location: function () {
    let name = Person.name
    wx.navigateTo({
      url: '../map/details'
    })
  },
});

detail.wxss代码：

/* pages/details/details.wxss */



.personPng{
  height:525rpx;
  width:371rpx;
}
.personPng_n{
  height:205rpx;
  width:730rpx;
}
.detailLeft{
  height:525rpx;
  width:371rpx;
  float: left;
  background-color: antiquewhite;
}
.detailRight{
  height:525rpx;
  width:381rpx;
  float: left;
  background-color: #4F2D29;   
}
.personalityTags{
  width:150rpx;
  height:39rpx;
  font-size: 28rpx;
  text-align: center;
  color:#fff;
  border:0.01rpx solid 
}
.personalityTags2{
  width:150rpx;
  height:39rpx;
  font-size: 26rpx;
  color:#fff;
  text-align: center;
  border-style:solid;
  border-width:thin;
}
.infoLeft{
  padding-top:10rpx;
  width:200rpx;
  height:225rpx;
  padding-left: 5rpx;
  float: left;
}
.infoRight{
  padding-top:10rpx;
  width:175rpx;
  height:225rpx;
  float: right;
}
.detailContent{
  width:750rpx;
 height:900rpx;
  display: flex;
  justify-content: center;  /*水平*/
  align-items: center; /*垂直*/
  background-color:#743E3E;
}
.inDetailContent{
  width:720rpx;
  height:880rpx;
  border-style:solid;
  border-width:5rpx;
  border-color: #743E3E;
  background-color:#743E3E;
}
.contentTitle{
  width:720rpx;
  height:30rpx;
  background:#743E3E;
}
.titleName{
  padding-left:150rpx;
  font-size: 40rpx;
}
.contentContent{
  width:720rpx;
  height:550rpx;
  padding-top: 10rpx;
  background:#743E3E
}
ec-canvas{
  width:379rpx;
  height:260rpx;
}
.title{
  text-align: center;
  height:10rpx;
}
.titleBack{
  text-align: right;
  background:#4F2D29;
  color:#fff;
}
.echart{
  padding-top:0rpx;
  width:379rpx;
  height:260rpx;
}

5，准备后台服务器

我的服务器是用的阿里云服务器，后台用.net写的，用IIS发布（需要在IIS服务器上安装SSL证书）

6，小程序发布上线

（1）上传代码

上传成功后，体验版小程序即可访问
（2）提交审核

等待审核（几小时或者更久）
（3）审核通过后，点击发布，即可变为线上版本。
在微信搜索使用即可
表结构：