从0到1开发一款微信小程序

本文章记录一些在开发微信小程序过程中的一小方法

iconfont图标获取

在网上的教程中是通过在线链接得到图标，但是现在没有了，所以使用下载到本地的方法，解压后将demo删除，其他文件复制粘贴到项目中，注意要将icontfont.wxss文件中的url地址改为本地地址

@font-face {
  font-family: "iconfont"; /* Project id 3536345 */
  src: url('style/iconfont/iconfont.woff2?t=1658320204553') format('woff2'),
       url('style/iconfont/iconfont.woff?t=1658320204553') format('woff'),
       url('style/iconfont/iconfont.ttf?t=1658320204553') format('truetype');
}

使用前需要在app.wxss文件中引用它，使用时直接用class选择

//引入
@import '/style/iconfont/iconfont.wxss';
//使用
<text class="iconfont icon-pinglun">

调用函数

有时候为了提高代码的复用性，会将常用的代码写出一个函数，可以创建一个utils文件，在里面创建.js文件书写代码，module.exports 对象是由模块系统创建的。在我们自己写模块的时候，需要在模块最后写好模块接口，声明这个模块对外暴露什么内容，module.exports 提供了暴露接口的方法。

//定义接口名
module.exports = {
  toDate: toDate
}
//引入
var times=require('../../utils/times.js');

一个页面多个跳转

通过数据库元素不同的id跳转到格式相同内容不同的页面，id一般是event.currentTarget.dataset.item._id，可以打印出来验证一下

goDetail(event){
    console.log(event.currentTarget.dataset.item._id)
    wx.navigateTo({
      url: '/pages/detail/detail?id='+event.currentTarget.dataset.item._id,
      
    })
  },

弹窗管理

通过更改modal里的隐藏状态可以实现弹窗，通过bindconfirm和bindcancel再次更改状态将弹窗取消

 <button class="bt_connect" hover-class="hover-class-1" bindtap="information">了解详情</button>
      <modal title="详情介绍" hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCandel">
        <view>
          <image class="image" src="" mode='aspectFill'></image>
        </view>
        <view>...</view>
      </modal>

information: function() {
    this.setData({
      modalHidden: false
    })
  },
  modalCandel: function() {
    // do something
    this.setData({
      modalHidden: true
    })
  },
  modalConfirm: function() {
    // do something
    this.setData({
      modalHidden: true
    })
  },

云开发

获取后台数据

首先将云数据库的数据权限设为所有人可读

wx.cloud.database().collection("banner").get({
      success:res=>{
        console.log(res)
        this.setData({
          mglist:res.data
        })
      }
    })

这样就获取到banner里的数据，存到mglist这个字符串里，接着在wxml界面中通过wx:for和item.字段名进行使用

<block wx:for="{{mglist}}">
      <swiper-item>
        <image style="width:100%;height:100%;" mode="aspectFill" src="{{item.photo}}">
        </image>
      </swiper-item>
    </block> 

使用云函数改变数据库中数据的状态

我们经常需要改变更新数据库中的数据，但是直接在页面中无法更新，原因是权限不够，但是云函数权限比普通函数高

//云函数中代码
else if(event.action=='fabiao'){
  return await cloud.database().collection("remarklist").doc(event.id)
  .update({
    data:{
      remark:event.remark
    }
  })
  .then(res=>{
    console.log("评论成功",res)
    return res;
  })
  .catch(res=>{
    console.log("评论失败",res)
    return res;
  })
}

页面代码如下，name是函数名，action是行为名，将pinglun的内容赋给remark，remark再回云函数更新给数据库中的remark

fabiao(){
    let pinglunItem={}
    pinglunItem.name='tt'
    pinglunItem.content=content
    pinglun.push(pinglunItem)
    console.log(pinglun)
    wx.cloud.callFunction({
      name:"caozuo",
      data:{
        action:"fabiao",
        id:ID,
        remark:pinglun
      }
    }).then(res=>{
      console.log("改变评论成功",res)
    })
    .catch(res=>{
      console.log("改变评论失败",res)
    })
  },