微信小程序开发

第一个bug

["tabBar"]["list"][1] 超过限制 40kb

解析

菜单图片大小不能超过40kb

方法

通过图片-编辑-调整大小来缩小图片大小

第二个bug

数据库连接失败——2003错误代码

解析

mysql服务未开

方法

通过计算机-管理-服务与应用程序-服务打开mysql的服务

第三个bug

Unhandled promise rejection TypeError: WebAssembly.instantiate(): Argument 0 must be a buffe

解析

版本太高

方法

在本地设置中降低版本

第四个问题

如何设置边框

解决

用border

第五个问题

view标签设置成按钮，出现高亮

分析

出现了`cursor:pointer;

解决

Ctrl+/ 注释

第六个问题

navigateTo带参跳转

解决

发送页面.js

goDetail:function(){
    var bookList = JSON.stringify(this.data.bookList) //myObj：本js文件中的对象
    wx.navigateTo({
    // url:接收数据的页面
      url: '../book-detail/book-detail?bookList='+bookList,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },

接收数据.js

},{}]

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var bookListHome
    if(!options.bookList) return false
    bookListHome =JSON.parse(options.bookList)
    //  bookList:本js文件中的对象
    this.setData({
      bookList: bookListHome
    })
  },

第七个问题

navigator页面带参跳转，参数为空

Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>) 

解决

if(!options.bookList) return false

第八个问题

navigatorTo带参跳转页面，其中参数为列表中的字典

解决

发送数据页面（直接列表[索引]）

.js
goDetail:function(e){
    var id=e.currentTarget.dataset.id
    console.log(id)
    var bookList=JSON.stringify(this.data.bookList[id-1])
    // var bookList = JSON.stringify(this.data.bookList) //myObj：本js文件中的对象
    wx.navigateTo({
      url: '../book-detail/book-detail?bookList='+bookList,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },
  .xml
  <view class="book-item" wx:for="{{bookList}}" wx:key="id" bindtap="goDetail" data-id="{{item.id}}">

接收数据页面不变

第九个问题

修改单个页面的背景

解决

单个页面css

page{
  background:#085db9;   
}

单个页面JSON
app.json中去掉windows的键值

  "backgroundColor": "#F6F6F6",
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#20709b",
  "navigationBarTitleText": "解忧书馆",
  "navigationBarTextStyle": "white"

第十个问题

页面背景渐变
单个页面css

background: -webkit-linear-gradient(top,#add8e6,rgb(83, 201, 248),rgba(9, 220, 239, 0.635));

其中，top为上下渐变，（left为左右渐变），三个颜色从头到底

第十一个问题

一个父元素下的多个子元素拥有相同的间隔

解决

  flex-direction: column;
  justify-content: space-around;

第一行：排列的轴，column为上下排列
第二行：所有子元素排列的间隔一致

第十二个问题–后端

Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception

NullPointerException异常

解决

SpringBoot中mapper，service，controller以及application的注解是否添加成功以及添加正确

第十三个问题

图片、文字无法水平放置，（其中文字需要换行、省略等样式）

解决

父元素

display:-webkit-box;

子元素（图片、文字）

-webkit-box-flex: 1; 

第十四个问题

wx.navigateTo跳转的页面，返回到上一个页面时，需要改动数据（比如1编变成2），但是因为wx.navigateBack执行之后，onLoad函数不会执行，因此可以把onLoad中函数中的代码在onShow中进行展示，成功get

第十五个问题-取消授权

小程序授权；之前写的代码中，当点击授权弹窗后，点击取消时，依旧会向后端发起获取openid的请求；原因是js代码没有进行判断；修改代码如下：其中else即为取消授权产生的效果

getUserInfo:function(e) {
    if(e.detail.userInfo){
      var that = this;
      var userInfo = e.detail.userInfo
      console.log(userInfo);
      that.setData({
        userInfo,
        hasUserInfo:true
      })
      wx.setStorageSync('userInfo', userInfo)
      that.getCode().then(code=>that.getOpenId(code)).then(data=>{
        console.log(data);
      });
      
    }else{
      wx.showToast({
        title: '授权已取消',
        icon:'none',
      })
    }
  },

微信小程序新的规定，使用button进行授权，添加以下属性

open-type="getUserInfo" bindgetuserinfo="getUserInfo"

第十六个问题-