微信小程序-项目搭建流程

微信小程序-项目搭建流程

1.app.json中搭建跳转

2.在app.js中绑定全局请求接口

 globalData: {
    userInfo: null,
    baseUrl:"http://api.aulence.com"
  }

3.载入全局数据

// 载入全局数据
const appData = getApp().globalData;

4.生命周期函数中请求数据

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that  =this //定义this指向
    //请求数据
    wx.request({
      url: `${appData.baseUrl}/mydata/roles/role-info.php?goodsID=12`, //仅为示例，并非真实的接口地址
      // header: {
      //   'content-type': 'application/json' // 默认值
      // },
      success (res){
        console.log(res.data) //打印请求的数据结果
        that.setData({
        rolesInfo:res.data  //把数据赋值给rolesInfo数组
       })
      }
    })
  },

5.渲染数据

<!-- 渲染数据数据 -->
<view class="roles">
  <view wx:for="{{rolesInfo}}" wx:key="role_id" class="role_list" bindtap="btn1">
    <image src="{{item.roleThumbnail}}" bindtap="btn2" data-pid="{{item.role_id}}"></image>
    <view class="role_name">{{item.roleName}}</view> 
  </view>
</view>

6.bindtap点击事件

 <!-- 自定义data-[属性名]=[属性值] ,传递id值-->
    <image src="{{item.roleThumbnail}}" bindtap="btn2" data-pid="{{item.role_id}}" 

js点击事件代码

  btn2(event){
    var pid = event.currentTarget.dataset.pid //获取自定义的pid值
    wx.navigateTo({
      url: '../details/details?pid='+pid, //?传参把pid传递到调整的详情页
    })
  },

7.自定义data-[属性名]=[属性值] ,传递id值

 <!-- 自定义data-[属性名]=[属性值] ,传递id值-->
    <image src="{{item.roleThumbnail}}" bindtap="btn2" data-pid="{{item.role_id}}"></image>

8.详情页面接收传递过来的参数

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var pid = options.pid-1  
    console.log(options.pid) //打印传递过来的pid
    var that  =this
    //请求数据
    wx.request({
      url: `${appData.baseUrl}/mydata/roles/role-info.php?goodsID=12`, //仅为示例，并非真实的接口地址
      success (res){
        console.log(res.data) //打印重新请求的数据
        that.setData({
          roledetail:res.data[pid] //更新roledetail对象内容
       })
      }
    })
  },

8.详情页渲染

<view>
  <text>详情</text>
  <image src="{{roledetail.roleThumbnail}}"></image>
</view>

9.微信小程序轮播使用
wxml代码

<!-- 轮播 -->
<view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{true}}" interval="{{1000}}" duration="{{duration}}" easing-function="easeInOutCubic" indicator-active-color="red" indicator-color="#f0f">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <image src="{{item}}"></image>
          </swiper-item>
        </block>
      </swiper>
</view>

js代码

 data: {
    background: ['https://img1.baidu.com/it/u=1785439420,3275744128&fm=26&fmt=auto&gp=0.jpg', 'https://img0.baidu.com/it/u=3157032244,1229042436&fm=26&fmt=auto&gp=0.jpg', 'https://img2.baidu.com/it/u=3758694494,217476606&fm=26&fmt=auto&gp=0.jpg'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500,
  },

10.案例效果