番外-三国志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: '',   // 分类Idpagenum: 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=thiswx.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() // 关闭loadingthis.setData({isLoading:false})}})},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {// 判断是否还有下一页数据if (this.data.queryObj.pagenum * this.data.queryObj.pagesize >= this.data.total) {wx.showLoading({title: '数据加载完毕！',})wx.hideLoading() // 关闭loadingreturn }// 判断是否正在请求其它数据，如果是，则不发起额外的请求if(this.data.isLoading) return let pagenum = this.data.queryObj.pagenumthis.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.namevar data=JSON.stringify(e.currentTarget.dataset)wx.navigateTo({url:'../details/details?name='+name+'&data='+data})  },// 排序orderBy:function(e){var name=e.currentTarget.dataset.namevar 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.thisDatalet that = thispara.biography1 = e.detail.value.biography1para.biography2 = e.detail.value.biography2para.biography3 = e.detail.value.biography3wx.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=namefor (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.nameconsole.log(options)var data = JSON.parse(options.data)var thisData = data.allvar that = thisvar 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.datavar xiangxing=data.xiangxingvar xueyuan=data.xueyuanvar fuqin=data.fuqinvar muqin=data.muqinvar shidai=data.shidaivar peiou=data.peiouvar yxd=data.yxdvar zx=data.zxvar zf=data.zfvar like1=data.like1var like2=data.like2var like3=data.like3var like4=data.like4var like5=data.like5var like6=data.like6var like7=data.like7var like8=data.like8var dislike1=data.dislike1var dislike2=data.dislike2var dislike3=data.dislike3var dislike4=data.dislike4var dislike5=data.dislike5var dislike6=data.dislike6var dislike7=data.dislike7var dislike8=data.dislike8var hj=data.hjvar fd=data.fdvar qx=data.qxvar gd=data.gdvar sg=data.sgvar hz=data.hzvar yl=data.ylvar cs=data.csvar zs=data.zsvar beLike=data.beLikevar beDisLike=data.beDisLikewx.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.namewx.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）审核通过后，点击发布，即可变为线上版本。
在微信搜索使用即可
表结构：

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

java小程序之学生信息_java小程序之学生信息录入界面
小程序我的项目下载链接:点击打开链接因为这学期比赛太多,蓝桥杯,团体程序设计大赛,ACM省赛等原因基本这学期的课程都没上,比赛完后开始去上课,java老师让用java写一个学生信息录入界面,把界面中 ...
微信小程序获取用户信息
微信小程序获取用户信息微信小程序获取用户信息接口做了调整: 2021年4月28日24时后发布的小程序新版本,无法通过wx.getUserInfo与获取用户个人信息(头像.昵称.性别与地区),将直接获 ...
SSM+mysql中药方剂管理与查询小程序-计算机毕业设计源码71796
摘要本文主要讨论了如何利用SSM框架开发一个中药方剂管理与查询小程序.它将严格按照软件开发流程进行各个阶段的工作,采用B/S架构.Java技术和面向对象的编程思想进行项目开发.在绪论中,将论述当前 ...
SSM+MYSQL 中药方剂管理与查询小程序源码71796
毕业设计 SSM 中药方剂管理与查询小程序院系: 姓名: 学号: 专业: ...
用python做一个数据查询软件_使用Python实现NBA球员数据查询小程序功能
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于早起Python ,作者投稿君一.前言有时将代码转成带有界面的程序,会极大地方便 ...
python进行数据查询_使用Python实现NBA球员数据查询小程序功能
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于早起Python ,作者投稿君一.前言有时将代码转成带有界面的程序,会极大地方便 ...
钉钉小程序获取用户信息
钉钉小程序获取用户信息 1.钉钉小程序只允许开发办公类的程序,不能开发娱乐型的程序. 2.钉钉小程序审核需要产品说明书,最大大小不能超过30M(文档). 3.貌似可以用IP,暂时没有看到有关https ...
Python编程--个人信息修改小程序
一个练习题,本人又做了一些功能的增加和完善.题目是:个人信息修改小程序. IDE: Pycharm OS: mac 功能需求: 1.输入管理员和密码,正确后登录系统,打印: 1. 打印个人信息 2. ...
查分吧(chafenba)万用考试成绩查询小程序源码
查分吧(chafenba)万用考试成绩查询小程序源码小程序演示:查分吧小程序源码:http://mabida.cn/chafenba.zip 可以快速应用于保密性不高且修改不频繁的成绩.工资.证书 ...