微信小程序—day05

小程序云服务器--环境配置

本来想要买腾讯云的云服务器，作为小程序的服务端的。无奈，腾讯云卖的太贵了，比阿里云要贵一倍，想想还是算了。

但是，没有服务端的接受，小程序的一些功能是实现不了的。找了一圈，发现一个腾讯云的小程序解决方案，完美解决了开发过程的问题（后期上线的话，要买服务器再说）

登陆微信公众平台，在 设置--开发者工具，开通腾讯云后，点击后台管理，就可以进入开发环境的配置页面。根据里面的操作进行配置，教程很全面。（也可以根据这个教程进行配置）链接：https://cloud.tencent.com/developer/article/1006816

服务器问题解决了，把之前未完成的代码复制过来，继续编写工作。

第一部分，文字输入框 + 图片输入框

接上一篇。

配置好服务环境，对图片上传后，就能正常显示了。

上传图片，完整js代码：

  /**
   * 添加图片
   */
  addImg: function(e){
    wx.chooseImage({
      success: (res)=> {
        // console.log(res)
        util.showBusy('正在上传')
        var tempFilePaths = res.tempFilePaths;

        // 上传图片
        wx.uploadFile({
          url: config.service.uploadUrl,
          filePath: tempFilePaths[0],
          name: 'image',

          success: (res)=>{
            util.showSuccess('上传图片成功')
            // console.log(res)
            res = JSON.parse(res.data)
            // console.log(res)
            this.setData({
              upImg: true,
              picUrl: tempFilePaths[0],
              temPath: tempFilePaths
            })
          },
          fail: function (e) {
            console.error(e)
          }
        })    
      },
      fail: function (e) {
        console.error(e)
      }
    })
  },

  /**
  * 预览图片
  */
  previewImg: function(e) {
    wx.previewImage({
      urls: this.data.temPath,
      success: (res)=>{
        // console.log(res)
      }
    })
  },

 

 

util.show是一个弹窗显示，是展现给用户看的。wx.uploadFile中的url就是之前环境配置的服务器域名。

ps:图片模块代码写好后，进行测试过程中；发现图片依旧不显示，原来是picUrl中的p一个地方写成了大写，我还以为是环境配错了，找了半天的bug。看来编码还需要细心一些。

这里后来又添加了一个预览图片的功能，上传完图片后，点击图片可进行预览。

第二部分，位置信息 + 发布按钮

需要用到获取位置信息的api，官方文档

wxml+wxss代码：

  <view class='editItem' bindtap='getLocation'>
    <view class='location'>
    <image class='locationImg' src='{{locationImgUrl}}'></image>
    <text class='locationText'>{{location}}</text>
    <image class='arrow' src='{{arrowUrl}}'></image>
    </view>
  </view>
  <view class='submitButton'>
    <button form-type='submit' size='mini'>发表</button>
  </view>

 

.editItem {
  height: 40px;
  border-bottom: solid #7676776b;
  padding-top: 5px;
}
.locationImg {
  width: 32px;
  height: 32px;
}
.location {
  position: relative;
}
.locationText {
  position: absolute;
  padding-top: 5px;
  padding-bottom: 5px;
}
.arrow {
  float: right;
  width: 32px;
  height: 32px;
  padding-right: 10px;
}
.submitButton {
  height: 40px;
}
.submitButton button {
  background-color: #8CBEF5;
  color: #fff;
  float: right;
  top: 20px;
  right: 20px;
}

 

js代码：

  /**
   * 获取位置信息
   */
  getLocation: function(e){
    wx.getSetting({
      success:(res)=>{
        if(!res.authSetting['scope.userLocation']){
          wx.authorize({
            scope: 'scope.userLocation',
            success:(res)=>{
              wx.chooseLocation({
                success: (res)=> {
                  // console.log(res);
                  this.setData({
                    location: res.name
                  })
                }
              })
            }
          })
        }
        else{
          wx.chooseLocation({
            success: (res)=> {
              // console.log(res);
              this.setData({
                location: res.name
              })
            }
          })
        }
      }
    })
  }

 

这里的wx.getSetting方法中的scope.userLocation，是判断用户是否同意获取地理位置信息的权限，没有则提示用户。

发布按钮，表单提交，获取一下用户输入的信息和当前的时间日期，以便后续使用。

js代码：

  /**
   * 表单提交
   */
  formSubmit: function(e){
    // console.log(e)
    var now = new Date();
    // console.log(now)
    var month = now.getMonth();
    var date = now.getDate();
    this.setData({
      blog: e.detail.value.blog,
      month: month+1,
      date: date,
      show: false
    })
  },

 

完成后的用户编辑页面：

 

 git代码托管

 几天，写了不少东西了，传一下github吧，万一没了就惨了。

还未全部完成，先不放链接，等基本功能都完成后吧。