大三实训-微信小程序

微信小程序框架

如果要真机调试需要在这里注册小程序账号，用这个账号里的AppID才行
修改AppID的位置在右上角按钮里。

1、轮播图

  <swiper class="banner" 
    indicator-dots="true" 
    indicator-color="{{lightGreen}}" 
    indicator-active-color="{{themeColor}}" 
    circular="true" 
    autoplay="true">
    <swiper-item wx:for="{{swiperItemUrl}}">
      <image src="{{item}}"></image>
    </swiper-item>
  </swiper>

双花括号就是引用控制器的数据模块，这里前俩{{}}是app.js全局变量：

swiperItemUrl在对应控制器中定义
wx:for循环渲染图片，循环内容是用item表示,有下标位置默认属性 index，图片相对路径格式如下图所示

2、GET请求

这里在util文件request.js内简单封装一下

export default (url,data={},method='GET')=>{
  return new Promise ((resolve,reject)=>{
    wx.request({
      url:config.host + url,
      data,
      method,
      success:(res) =>{
        console.log("请求成功：",res);
        resolve(res.data);
      },
      fail:(err) =>{
        console.log("请求失败：",err);
        reject(err);
      }
    })
  })
}

调用时：

let res = await request('/charact',{garbage:this.data.searchInput},'GET');

3、上传图片(POST请求）

//分割 切割字符 字符最后一次出现的下标  \" 
title: res.data.split("_")[1].substring(0,res.data.split("_")[1].lastIndexOf("\"")),
// wx.showToast 提示框

  photoUpload(){
  //图片
    let photoPathString = this.data.photoPath[0];
    wx.uploadFile({
      filePath: photoPathString,
      //命名一定要对口
      name: 'file',
      //后端接收的接口
      url: config.host+'/upload',
      formData: {
        file: photoPathString,
      },
    
      header: {
        "Content-Type": "multipart/form-data",
        },
      success(res){
        console.log("upload success!",res),
        wx.showToast({
          title: res.data.split("_")[1].substring(0,res.data.split("_")[1].lastIndexOf("\"")),
          icon: 'success'
        })
      },
      fail(err){
        console.log(err),
        wx.showToast({
          title: '识别错误',
          icon: 'error'
        })
      }
    })
 },

4、文字图标

链接: 文字图标编辑器
链接: 所用图标

样例：

这里也推荐一个制作icon的在线工具

5、跳转页面带参

1. 页面绑定按钮
   使用标签的 bindtap属性绑定控制器的方法，注意不用括号

<button size="mini" data-index="0" bindtap="jumpToClasses"></button>

2. 跳转带参

  jumpToClasses(event){
    let id = 1
    wx.navigateTo({
      url: '/pages/classes/classes?id='+id,
    })
  },

3. 指定页面接收参数
   直接用参数options接住，nowId 是在data块声明的

  onLoad: function (options) {
    this.setData({
      nowId : options.id
    })
  },