微信小程序开发中的问题

最新推荐文章于 2023-06-11 10:32:39 发布

98年撸铁的老阿姨

最新推荐文章于 2023-06-11 10:32:39 发布

阅读量206

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_43420159/article/details/117777702

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

微信小程序开发中的入口页面：
微信小程序Tabbar(页面下侧的导航栏)的实现
1）官方配置文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
2）打开app.json(在该文件中进行配置Tabbar)
微信小程序封装请求
1）若需要访问本地接口，则需要在“详情”-“本地设置”中勾选不校验合法域名

2）在utils目录下编写http.js文件

module.exports = {
  http(url, method, params) {
    let data = {}
    if (params.data) { // 在这里判断一下data是否存在，params表示前端需要传递的数据，params是一个对象，有三组键值对，data：表示请求要发送的数据，success：成功的回调，fail：失败的回调，这三个字段可缺可无，其余字段会忽略
      for (let key in params.data) { // 在这里判断传过来的参数值为null，就删除这个属性
        if (params.data[key] == null || params.data[key] == 'null') {
          delete params.data[key]
        }
      }
      data = { ...data, ...params.data }
    }
    wx.request({
     
      url: 'http://localhost:9898/' + url, // 就是拼接上前缀,此接口域名是开放接口，可访问
      method: method == 'post' ? 'post' : 'get', // 判断请求类型，除了值等于'post'外，其余值均视作get 其他的请求类型也可以自己加上的
      data,
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        params.success && params.success(res.data)
      },
      fail(err) {
        params.fail && params.fail(err)
      }
    })
  }
}

3）在utils目录下编写api.js(这个文件把所有需要访问的接口进行编写)

// 在这里面定义所有接口，一个文件管理所有接口，易于维护
import { http } from './http'; // 引入刚刚封装好的http模块，import属于ES6的语法，微信开发者工具必须打开ES6转ES5选项
 
function selectAllCourse(params) {
  http('course/selectAllCourse', 'post', params)  
}

function deleteCoursePlan(params) { 
  http('/course/deleteCoursePlan', 'get', params)
}
 

export default { // 暴露接口
  selectAllCourse,
  deleteCoursePlan
}

4）使用api.js中定义的接口的方式：首先引入import http from ‘…/…/utils/api’ ，然后直接使用其中已经封装好的的接口

// index.js
// 获取应用实例
const app = getApp()
import http from '../../utils/api' // 引入api接口管理文件

Page({
  data: {
    users:[
      {id:1,name:"user1"},
      {id:2,name:"user2"},
    ]
  },
  onLoad() {
    this.getData()
  },
  getData(){
    http.selectAllCourse({ // 调用接口，传入参数
      data: {
        isPage:'0'
      },
      success: res => {
        console.log('接口请求成功', res)
        this.setData({
          users: res.data
        })
      },
      fail: err => {
        console.log(err)
      }
    })
  }
})

npm引入vant-weapp出现错误
解决方法：
1）把miniprogram_npm/vant-weapp里的组件文件夹都删除；
2）在https://github.com/youzan/vant-weapp下载一份vant，将dist文件夹（vant-weapp-dev\vant-weapp-dev\dist）中的文件复制到项目的miniprogram_npm/vant-weapp