[图片] 非自定义导航栏高度怎么计算？ 自定义导航栏高度由谁决定？ 小程序自定义导航栏开发注意点与参考文档 一、默认导航栏高度怎么计算？（非custom情况下获取） wx.getSystemInfo 和 wx.getSystemInfoSync 获取机器信息 screenHeight - windowHeight   计算标题栏高度 [代码]{[代码][代码]       [代码][代码]'iPhone'[代码][代码]: 64,[代码][代码]       [代码][代码]'iPhone X'[代码][代码]: 88,[代码][代码]       [代码][代码]'android'[代码][代码]: 68[代码][代码] [代码][代码]}[代码]不完全统计（ip6 , ip5 , ip6p , ipx , 小米mix2  , 小米5等综合了开发工具提供的数据和真机数据）所得 二、自定义导航栏高度由谁决定？（自定义情况下，屏幕高度和窗口高度没有差别，所以要通过步骤1先获取数据，预定义到代码中） 开发时发现，自定义导航栏的实现需要 包含状态栏+胶囊 ：没有自定义导航栏的时候页面是全屏幕滚动会出现在状态栏的下一层 根据上一标题中步骤1的函数，可以获得状态栏高度 statusBarHeight demo，点击打开小程序开发工具 三、小程序自定义导航栏开发注意点与参考文档 微信官方设计指导中关于胶囊按钮的描述 由此得知胶囊宽度87pt=116px，设置之后，的确能产生较好的兼容性效果 社区Q&A：自定义标题栏高度计算、在 navigationStyle: 'custom',苹果X和8兼容问题 注意某些方法、参数的兼容性，时刻关注官方更新信息 开一个项目采集设备的screenHeight,windowHeight,pixelRatio等信息到一个数据库中，或者微信可以提供这样一个数据库便于计算，亦或者微信优化自定义标题栏（譬如通知栏可以改变颜色但不要算在自定义范围内，给出胶囊宽高到通知栏距离到右侧屏幕边框距离等相关参数）

之前由于项目需要做了一个半屏弹出，现将此功能用代码片段分享给大家。 代码片段wechatide://minicode/vL1KAtmF7g1n 效果演示： [图片]

功能 渲染微信公众号文章(搜索引擎) 市面上实现的方法 小程序内渲染: 方案一:     使用rich-text 坑:     图片不能控制;         let content = res.data.entities.content.replace(/\<img/gi, '<img style="width:100%;height:auto" ')         替换了，模拟机是正常width:100%但是真机图片没有效果(华为v9，6.67，如果你的可以请告知)     有的数据渲染不出来 没有定位(猜想是有的标签渲染不出来);  所有这个方案pass 掉了，说一句rich-text速度还是可以,的不知道实现原理是什么,为什么说渲染速度，下文有提。     方案二:     使用wxParse 插件    因为之前使用过wxParse所有一开始，觉得渲染功能还是很简单的，BUT，并不是。   功能需要，文章在单独一个页面。从后台数在页面渲染出效果，还可以，但是有个console，Template `wxParse12` not found.    之前使用并未出现，只能定位下，最后发现，是渲染dom层级太深了导致，从GitHub https://github.com/icindy/wxParse/wiki/wxParse-%E5%A6%82%E4%BD%95%E9%87%8D%E5%A4%8D%E5%B5%8C%E5%A5%97%E6%A8%A1%E7%89%88 添加了几个后，菊花一紧，性能可能要崩。果然用真机一跑，打开第一篇文章还好，但是返回到列表就不对了，卡出翔，loadmore事件触发不了，再次点击文章title，半天进入不了详情页面，也是给跪了。。。  坑:   总结一下就是文章数据有点多，dom层级有点深，渲染有点慢，交互有点卡(公众号文章渲染层级能达到15+的深度) 方案三:     使用业务域名，webview组件     文章图片防盗链，后台不好处理，处理好了需要存自己服务器，需要和后台沟通 解决ing。。。 改下wxParse，把多余的绑定事件去掉，减少模板循环，(发现循环10以上的内容都是垃圾内容)。 尝试下wxParse小程序的插件，好像是基于rich-text的 与后台沟通页面渲染 16:56      ------------------------更新-------------------------- 修改wxparse,去掉了图片相关的事件，但是效果并不好， 然后调研了wxParser-plugin，用起来还可以，暂时发现的问题是包有点大，然后插件解析的页面，第二次进来会看到上次页面的内容，最好添加一个loading，等内容替换掉展示，其他的问题暂时没有，就暂时使用这个插件，接下来如果还有问题持续更细 18：00 -----------------------更新------------------------ 需要把\n替换掉否则会占一行，也是很奇怪，text不能设置height为0么，因为插件会把换行解析出来，用text包裹，然后f12尝试下把height设置成0，并没有奏效，不知道在代码里写会不会奏效，还是text就不能设置height为0，无所谓了，如果不想\n空占一行，请替换掉，wxparse好像没有这个。18：43 ----------------------更新------------------------ 项目中用了wepy，把文章展示提到了组件中，在组件config配置usingComponents 没有起作用需要在引用组件页面config，其他插件应该也是一样的。 2018/9/5 ---------------------更新--------------------- 发现一个瑕疵，图片没有懒加载，内容替换不奏效啊

小程序选择图片上传base64格式给后端。 1 、在wxml，创建节点 [代码]<canvas canvas-id='myCanvas' style='width:{{imgWidth}}px;height:{{imgHeight}}px;'></canvas>[代码] [代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"weui-cell weui-cell_access"[代码] [代码]hover-class[代码][代码]=[代码][代码]"weui-cell_active"[代码] [代码]bindtap[代码][代码]=[代码][代码]"chooseImage"[代码] [代码]data-id[代码][代码]=[代码][代码]"myCanvas"[代码][代码]>[代码] [代码]   [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"weui-cell__bd"[代码][代码]>选择图片</[代码][代码]view[代码][代码]>[代码][代码]   [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"weui-cell__ft weui-cell__ft_in-access"[代码][代码]>[代码][代码]      [代码][代码]<[代码][代码]image[代码] [代码]src[代码][代码]=[代码][代码]'{{canvasImg}}'[代码] [代码]style[代码][代码]=[代码][代码]'width:50px;height:50px;'[代码][代码]></[代码][代码]image[代码][代码]>[代码][代码]   [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码] 2、在js，编写逻辑 [代码]chooseImage:[代码][代码]function[代码][代码](){[代码][代码]    [代码][代码]var[代码] [代码]self = [代码][代码]this[代码][代码];[代码][代码]    [代码][代码]var[代码] [代码]canvasId = e.currentTarget.dataset.id;[代码][代码]    [代码][代码]console.log([代码][代码]"canvasId==>"[代码][代码], canvasId)[代码][代码]    [代码][代码]var[代码] [代码]newDate = [代码][代码]new[代码] [代码]Date();[代码][代码]    [代码][代码]var[代码] [代码]year = newDate.getFullYear();[代码][代码]    [代码][代码]var[代码] [代码]month = newDate.getMonth() + 1;[代码][代码]    [代码][代码]var[代码] [代码]date = newDate.getDate();[代码][代码]    [代码][代码]var[代码] [代码]str = year + [代码][代码]"-"[代码] [代码]+ month + [代码][代码]"-"[代码] [代码]+ date;[代码] [代码]    [代码][代码]wx.chooseImage({[代码][代码]      [代码][代码]count: 1,[代码][代码]      [代码][代码]success: [代码][代码]function[代码][代码](res) {[代码][代码]        [代码][代码]console.log([代码][代码]"wx.chooseImage res=>"[代码][代码], res);[代码][代码]        [代码][代码]var[代码] [代码]imgUrls = res.tempFilePaths;[代码][代码]        [代码][代码]wx.getImageInfo({[代码][代码]          [代码][代码]src: imgUrls[0],[代码][代码]          [代码][代码]success: [代码][代码]function[代码][代码](res) {[代码][代码]            [代码][代码]console.log([代码][代码]'wx.getImageInfo res=>'[代码][代码], res);[代码] [代码]            [代码][代码]let imgWidth = res.width;[代码][代码]            [代码][代码]let imgHeight = res.height;[代码][代码]            [代码][代码]let imgName = str + [代码][代码]"-"[代码] [代码]+ res.path.slice(-20);[代码] [代码]            [代码][代码]if[代码] [代码](imgWidth >= 2000) {[代码][代码]              [代码][代码]imgWidth = imgWidth / 2;[代码][代码]              [代码][代码]imgHeight = imgHeight / 2;[代码][代码]            [代码][代码]}[代码] [代码]            [代码][代码]self.setData({[代码][代码]              [代码][代码]imgWidth: imgWidth,[代码][代码]              [代码][代码]imgHeight: imgHeight,[代码][代码]            [代码][代码]});[代码]  [代码]            [代码][代码]setTimeout(() => {[代码][代码]              [代码][代码]self.createCanvas(imgUrls, imgWidth, imgHeight, canvasId, imgName);[代码][代码]            [代码][代码]}, 100);[代码] [代码]          [代码][代码]}[代码][代码]        [代码][代码]})[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]});[代码][代码]},[代码][代码]createCanvas: [代码][代码]function[代码][代码](imgUrls, imgWidth, imgHeight, canvasId, imgName) {[代码][代码]    [代码] [代码]    [代码][代码]var[代码] [代码]self = [代码][代码]this[代码][代码];[代码] [代码]    [代码][代码]var[代码] [代码]ctx = wx.createCanvasContext(canvasId);[代码][代码]    [代码][代码]ctx.drawImage(imgUrls[0], 0, 0, imgWidth, imgHeight);[代码] [代码]    [代码][代码]wx.showLoading({[代码][代码]      [代码][代码]title: [代码][代码]'上传中'[代码][代码],[代码][代码]    [代码][代码]})[代码] [代码]    [代码][代码]ctx.draw([代码][代码]false[代码][代码], () => {[代码][代码]      [代码][代码]wx.hideLoading();[代码][代码]      [代码][代码]wx.canvasGetImageData({[代码][代码]        [代码][代码]canvasId: canvasId,[代码][代码]        [代码][代码]x: 0,[代码][代码]        [代码][代码]y: 0,[代码][代码]        [代码][代码]width: imgWidth,[代码][代码]        [代码][代码]height: imgHeight,[代码][代码]        [代码][代码]success: res => {[代码][代码]          [代码][代码]// wx.hideLoading();[代码][代码]          [代码][代码]// 3. png编码[代码][代码]          [代码][代码]let pngData = upng.encode([res.data.buffer], res.width, res.height)[代码][代码]          [代码][代码]// 4. base64编码[代码][代码]          [代码][代码]let base64 = wx.arrayBufferToBase64(pngData)[代码][代码]          [代码][代码]let base64Data = [代码][代码]'data:image/jpeg;base64,'[代码] [代码]+ base64;[代码][代码]          [代码][代码]console.log([代码][代码]'base64Data=>'[代码][代码], base64Data);[代码][代码]        [代码] [代码]          [代码][代码]self.addImageFile(base64Data, canvasId, imgName);[代码][代码]        [代码][代码]},[代码][代码]        [代码][代码]fail(err) {[代码][代码]          [代码][代码]wx.hideLoading();[代码][代码]          [代码][代码]console.log(err)[代码][代码]        [代码][代码]},[代码][代码]      [代码][代码]})[代码][代码]    [代码][代码]});[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]addImageFile: [代码][代码]function[代码][代码](base64Data, canvasId, imgName) {[代码][代码]    [代码][代码]var[代码] [代码]self = [代码][代码]this[代码][代码];[代码] [代码]    [代码][代码]let url = [代码][代码]"api/uploadImg.do"[代码][代码];[代码][代码]    [代码][代码]let ticket = wx.getStorageSync([代码][代码]'ticket'[代码][代码]) || [代码][代码]""[代码][代码];[代码] [代码]    [代码][代码]let data = {[代码][代码]      [代码][代码]"ticket"[代码][代码]: ticket,[代码][代码]      [代码][代码]"base64Data"[代码][代码]: encodeURIComponent(base64Data),[代码][代码]      [代码][代码]"imgName"[代码][代码]: imgName[代码][代码]    [代码][代码]}[代码] [代码]    [代码][代码]wx.request({[代码][代码]      [代码][代码]url: url, [代码][代码]//仅为示例，并非真实的接口地址[代码][代码]      [代码][代码]data: data,[代码][代码]      [代码][代码]header: {[代码][代码]        [代码][代码]'content-type'[代码][代码]: [代码][代码]'application/json'[代码] [代码]// 默认值[代码][代码]      [代码][代码]},[代码][代码]      [代码][代码]method: [代码][代码]"POST"[代码][代码],[代码][代码]      [代码][代码]success: [代码][代码]function[代码][代码](res) {[代码][代码]        [代码][代码]let data = res.data;[代码][代码]        [代码][代码]wx.hideLoading();[代码][代码]      [代码][代码]},[代码][代码]      [代码][代码]fail: [代码][代码]function[代码][代码](err) {[代码][代码]        [代码][代码]wx.hideLoading();[代码] [代码]      [代码][代码]}[代码][代码]    [代码][代码]});[代码] [代码]  [代码][代码]},[代码] 3.page 里面要引入 const upng = require("./UPNG.js"); 在upng.js里面要引入pako.min.js 具体的可github搜索查找。 [图片] 4、根据小程序前端转base64给后端的过程中，小程序会出现奔溃，延时长的情况，因为转base64比较耗时间，实际开发中还是建议让后端去转，使用api接口 wx.uploadFile(OBJECT) 但有需要的也可以了解下该方法

前端界面：[图片] [图片] [代码]<!-- 表单 -->[代码][代码]<[代码][代码]form[代码] [代码]bindsubmit[代码][代码]=[代码][代码]"formSubmit"[代码][代码]>[代码][代码]<[代码][代码]input[代码] [代码]type[代码][代码]=[代码][代码]"text"[代码] [代码]name[代码][代码]=[代码][代码]"liuyantext"[代码] [代码]placeholder[代码][代码]=[代码][代码]'输入留言内容'[代码] [代码]class[代码][代码]=[代码][代码]"input-style"[代码][代码]/>[代码][代码]<[代码][代码]button[代码] [代码]formType[代码][代码]=[代码][代码]"submit"[代码] [代码]class[代码][代码]=[代码][代码]"btn"[代码] [代码]wx:if[代码][代码]=[代码][代码]"{{nickName == empty}}"[代码] [代码]open-type[代码][代码]=[代码][代码]"getUserInfo"[代码] [代码]bindgetuserinfo[代码][代码]=[代码][代码]"bindGetUserInfo"[代码] [代码]bindtap[代码][代码]=[代码][代码]'login'[代码][代码]>授权登录</[代码][代码]button[代码][代码]>[代码][代码]<[代码][代码]button[代码] [代码]formType[代码][代码]=[代码][代码]"submit"[代码] [代码]class[代码][代码]=[代码][代码]"btn"[代码] [代码]wx:else>留言</[代码][代码]button[代码][代码]>[代码][代码]<[代码][代码]input[代码] [代码]type[代码][代码]=[代码][代码]"text"[代码] [代码]name[代码][代码]=[代码][代码]"nickname"[代码] [代码]value[代码][代码]=[代码][代码]'{{nickName}}'[代码] [代码]style[代码][代码]=[代码][代码]"display:none;"[代码][代码]/>[代码][代码]<[代码][代码]input[代码] [代码]type[代码][代码]=[代码][代码]"text"[代码] [代码]name[代码][代码]=[代码][代码]"headimg"[代码] [代码]value[代码][代码]=[代码][代码]'{{avatarUrl}}'[代码] [代码]style[代码][代码]=[代码][代码]"display:none;"[代码][代码]/>[代码][代码]</[代码][代码]form[代码][代码]>[代码] [代码]<[代码][代码]view[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{re}}"[代码] [代码]wx:key[代码][代码]=[代码][代码]"re"[代码][代码]>[代码][代码]  [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"result"[代码][代码]>{{item.result}}</[代码][代码]view[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]<[代码][代码]view[代码] [代码]style[代码][代码]=[代码][代码]"text-align:center;font-size:14px;color:#ccc;margin-top:20px;"[代码][代码]>以下是留言内容</[代码][代码]view[代码][代码]>[代码][代码]<[代码][代码]view[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{liuyanlist}}"[代码] [代码]wx:key[代码][代码]=[代码][代码]"liuyanlist"[代码] [代码]class[代码][代码]=[代码][代码]"liuyanview"[代码][代码]>[代码][代码]  [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"headimg"[代码][代码]><[代码][代码]image[代码] [代码]src[代码][代码]=[代码][代码]"{{item.headimg}}"[代码][代码]></[代码][代码]image[代码][代码]></[代码][代码]view[代码][代码]>[代码][代码]  [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"nickname_liuyantext"[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"nickname"[代码][代码]>{{item.nickname}} <[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"time"[代码][代码]>{{item.lytime}}</[代码][代码]view[代码][代码]></[代码][代码]view[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"text"[代码][代码]>{{item.liuyantext}}</[代码][代码]view[代码][代码]>[代码][代码]  [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]  [代码][代码]<!-- 占位符 -->[代码][代码]  [代码][代码]<[代码][代码]view[代码] [代码]style[代码][代码]=[代码][代码]"width:100%;height:10px;"[代码][代码]></[代码][代码]view[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码] [代码]//index.js[代码][代码]//获取应用实例[代码][代码]const app = getApp()[代码][代码]Page({[代码][代码]  [代码][代码]/**[代码][代码]   [代码][代码]* 页面的初始数据[代码][代码]   [代码][代码]*/[代码][代码]  [代码][代码]data: {[代码][代码]    [代码] [代码]  [代码][代码]},[代码] [代码]  [代码][代码]//授权登录[代码][代码]  [代码][代码]login: [代码][代码]function[代码] [代码]() {[代码][代码]    [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码];[代码][代码]    [代码][代码]// 查看是否授权[代码][代码]    [代码][代码]wx.getSetting({[代码][代码]      [代码][代码]success(res) {[代码][代码]        [代码][代码]if[代码] [代码](res.authSetting[[代码][代码]'scope.userInfo'[代码][代码]]) {[代码][代码]          [代码][代码]// 已经授权，可以直接调用 getUserInfo 获取头像昵称[代码][代码]          [代码][代码]wx.getUserInfo({[代码][代码]            [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码][代码]              [代码][代码]console.log(res.userInfo),[代码][代码]                [代码][代码]that.setData({[代码][代码]                  [代码][代码]nickName: res.userInfo.nickName,[代码][代码]                  [代码][代码]avatarUrl: res.userInfo.avatarUrl,[代码][代码]                [代码][代码]})[代码][代码]            [代码][代码]}[代码][代码]          [代码][代码]})[代码][代码]        [代码][代码]}[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]})[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]bindGetUserInfo(e) {[代码][代码]    [代码][代码]console.log(e.detail.userInfo)[代码][代码]  [代码][代码]},[代码]  [代码]  [代码][代码]formSubmit: [代码][代码]function[代码] [代码](e) {[代码][代码]    [代码][代码]wx.showToast({[代码][代码]      [代码][代码]title: [代码][代码]'已留言'[代码][代码],[代码][代码]      [代码][代码]icon: [代码][代码]'success'[代码][代码]    [代码][代码]})[代码][代码]    [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码];[代码][代码]    [代码][代码]var[代码] [代码]liuyantext = e.detail.value.liuyantext; [代码][代码]//获取表单所有name=liuyantext的值 [代码][代码]    [代码][代码]var[代码] [代码]nickName = e.detail.value.nickname; [代码][代码]//获取表单所有name=nickName的值 [代码][代码]    [代码][代码]var[代码] [代码]headimg = e.detail.value.headimg; [代码][代码]//获取表单所有name=headimg的值 [代码][代码]    [代码][代码]wx.request({[代码][代码]      [代码][代码]url: [代码][代码]'http://localhost/liuyanserver/liuyan.php?liuyantext='[代码] [代码]+ liuyantext + [代码][代码]'&nickname='[代码] [代码]+ nickName + [代码][代码]'&headimg='[代码] [代码]+ headimg,[代码][代码]      [代码][代码]data: {[代码][代码]        [代码][代码]liuyantext,[代码][代码]        [代码][代码]nickName,[代码][代码]        [代码][代码]headimg[代码][代码]      [代码][代码]},[代码][代码]      [代码][代码]header: { [代码][代码]'Content-Type'[代码][代码]: [代码][代码]'application/json'[代码] [代码]},[代码][代码]      [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码][代码]        [代码][代码]console.log(res.data)[代码][代码]        [代码][代码]that.setData({[代码][代码]          [代码][代码]re: res.data,[代码][代码]        [代码][代码]})[代码][代码]        [代码][代码]wx.hideToast();[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]})[代码][代码]  [代码][代码]},[代码] [代码]  [代码][代码]onPullDownRefresh: [代码][代码]function[代码] [代码]() {[代码][代码]    [代码][代码]wx.showNavigationBarLoading();[代码][代码]    [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码]    [代码][代码]wx.request({[代码][代码]      [代码][代码]url: [代码][代码]'http://localhost/liuyanserver/loadliuyan.php'[代码][代码],[代码][代码]      [代码][代码]headers: {[代码][代码]        [代码][代码]'Content-Type'[代码][代码]: [代码][代码]'application/json'[代码][代码]      [代码][代码]},[代码][代码]      [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码][代码]        [代码][代码]//将获取到的json数据，存在名字叫list的这个数组中[代码][代码]        [代码][代码]that.setData({[代码][代码]          [代码][代码]liuyanlist: res.data,[代码][代码]          [代码][代码]//res代表success函数的事件对，data是固定的，liuyanlist是数组[代码][代码]        [代码][代码]})[代码][代码]        [代码][代码]// 隐藏导航栏加载框[代码][代码]        [代码][代码]wx.hideNavigationBarLoading();[代码][代码]        [代码][代码]// 停止下拉动作[代码][代码]        [代码][代码]wx.stopPullDownRefresh();[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]})[代码][代码]  [代码][代码]},[代码] [代码]  [代码][代码]//加载最新数据[代码][代码]  [代码][代码]onLoad: [代码][代码]function[代码] [代码]() {[代码][代码]    [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码]    [代码][代码]wx.request({[代码][代码]      [代码][代码]url: [代码][代码]'http://localhost/liuyanserver/loadliuyan.php'[代码][代码],[代码][代码]      [代码][代码]headers: {[代码][代码]        [代码][代码]'Content-Type'[代码][代码]: [代码][代码]'application/json'[代码][代码]      [代码][代码]},[代码][代码]      [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码][代码]        [代码][代码]//将获取到的json数据，存在名字叫list的这个数组中[代码][代码]        [代码][代码]that.setData({[代码][代码]          [代码][代码]liuyanlist: res.data,[代码][代码]          [代码][代码]//res代表success函数的事件对，data是固定的，liuyanlist是数组[代码][代码]        [代码][代码]})[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]})[代码][代码]  [代码][代码]}[代码][代码]})[代码] [代码]/**index.wxss**/[代码][代码].input-style{[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]90%[代码][代码];[代码][代码]  [代码][代码]height[代码][代码]: [代码][代码]50px[代码][代码];[代码][代码]  [代码][代码]border[代码][代码]:[代码][代码]1px[代码] [代码]solid[代码] [代码]#ccc[代码][代码];[代码][代码]  [代码][代码]margin[代码][代码]:[代码][代码]10px[代码] [代码]auto[代码][代码];[代码][代码]}[代码] [代码].btn{[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]88%[代码][代码];[代码][代码]  [代码][代码]margin[代码][代码]:[代码][代码]5px[代码] [代码]auto[代码][代码];[代码][代码]}[代码] [代码].liuyanview{[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]90%[代码][代码];[代码][代码]  [代码][代码]margin[代码][代码]: [代码][代码]10px[代码] [代码]auto[代码][代码];[代码][代码]}[代码] [代码].result{[代码][代码]  [代码][代码]text-align[代码][代码]: [代码][代码]center[代码][代码];[代码][代码]  [代码][代码]font-size[代码][代码]: [代码][代码]14px[代码][代码];[代码][代码]  [代码][代码]color[代码][代码]: [代码][代码]#f00[代码][代码];[代码][代码]  [代码][代码]margin-top[代码][代码]: [代码][代码]20px[代码][代码];[代码][代码]}[代码] [代码].headimg{[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]45px[代码][代码];[代码][代码]  [代码][代码]height[代码][代码]: [代码][代码]45px[代码][代码];[代码][代码]  [代码][代码]border-radius: [代码][代码]100%[代码][代码];[代码][代码]}[代码] [代码].headimg image{[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]45px[代码][代码];[代码][代码]  [代码][代码]height[代码][代码]: [代码][代码]45px[代码][代码];[代码][代码]  [代码][代码]border-radius: [代码][代码]100%[代码][代码];[代码][代码]}[代码] [代码].nickname_liuyantext{[代码][代码]  [代码][代码]width[代码][代码]: calc([代码][代码]100%[代码] [代码]- [代码][代码]55px[代码][代码]);[代码][代码]  [代码][代码]float[代码][代码]: [代码][代码]right[代码][代码];[代码][代码]  [代码][代码]margin-top[代码][代码]:[代码][代码]-45px[代码][代码];[代码][代码]}[代码] [代码].nickname_liuyantext .nickname{[代码][代码]  [代码][代码]font-size[代码][代码]: [代码][代码]15px[代码][代码];[代码][代码]  [代码][代码]color[代码][代码]: [代码][代码]#999[代码][代码];[代码][代码]}[代码] [代码].nickname_liuyantext .nickname .time{[代码][代码]  [代码][代码]font-size[代码][代码]: [代码][代码]11px[代码][代码];[代码][代码]  [代码][代码]color[代码][代码]: [代码][代码]#999[代码][代码];[代码][代码]  [代码][代码]float[代码][代码]: [代码][代码]right[代码][代码];[代码][代码]}[代码] [代码].nickname_liuyantext .text{[代码][代码]  [代码][代码]font-size[代码][代码]: [代码][代码]16px[代码][代码];[代码][代码]  [代码][代码]color[代码][代码]: [代码][代码]#666[代码][代码];[代码][代码]}[代码] 以上是前端部分 后端有两个文件。 点击下载后端，后端需要修改自己的数据库配置！ 视频：https://www.lanzous.com/i1w1deb 后端：https://www.lanzous.com/i1w19pi

好的经验必须要分享：chooseImage后转base64 现在网上各种帖子的解决方案存在各种各样的问题，不说了，直接贴代码，手机亲测，没有问题 const fileManager = wx.getFileSystemManager(); [图片]