逆战之微信小程序—简单的商城开发

1.微信小程序—全局配置

全局配置，主要体现在app.js和app.json。app.js中主要使用的事件为onlaunch，它用于监听小程序初始化后触发。当打开小程序，会进行获取商城的名称，获取用户信息，用户登录，本地存储的过程。微信提供了丰富的API，简化开发步骤，其中用的最多的是wx.request()，它类似于ajax，用于前后台的数据交互。通过调用接口wx.login() 获取临时登录凭证（code）。
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象。页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。

2.微信小程序—首页轮播图数据的请求及渲染

// import { request } from './../../utils/index.js'
Page({
 	data: {
 	bannerlist: []
 	},
	 onLoad: function (options) {
 		request('/api/pro/banner').then(data => {
		 console.log(data)
 		// 微信⼩程序修改数据的⽅式
		 this.setData({
			 bannerlist: data.data
 			})
		 })
	 },
})

//pages/home/home.wxml
<swiper
 	indicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}" 
 	duration="{{500}}">
	 <block wx:for="{{bannerlist}}" wx:key="index">
	 	<swiper-item >
 			<image src="{{'http://daxun.kuboy.top' + item}}"></image>
 		</swiper-item>
	 </block>
</swiper> 
<prolist></prolist>

3.微信小程序—点击商品列表进入产品详情页面

3.1构建详情页

app.json

"pages": [
 "pages/detail/detail"
],

3.2路由跳转

3.2.1声明式导航跳转

使⽤⼩程序 组件-导航-navigator

参考链接 navigator

逻辑：在navigator组件的url上写入要跳转的详情页地址,组件写在产品列表最外层

// components/prolist/prolist.wxml
<view class="prolist">
<!-- 声明式导航 -->
	 <navigator url="{{'/pages/detail/detail?proid=' + item.proid}}"
		wx:for="{{prolist}}" wx:key="item.proid">
		 <view class="proitem" >
			 <view class="itemimg">
				 <image class="img" src="{{item.proimg}}"></image>
			 </view>
			 <view class="iteminfo">
				 <view class="title">
				 {{item.proname}}
				 </view>
				 <view class="price">
				 ￥{{item.price}}
				 </view>
			 </view>
		 </view>
	 </navigator>
</view>

3.2.2编程式导航

使⽤⼩程序提供的 api—导航 实现编程式路由的跳转

参考链接wx.navigateTo(Object,object)

逻辑：bindtap定义事件,采用data-params形式传递事件参数，并在事件中根据 event/a 获取该参数

// components/prolist/prolist.wxml
  
<view class="pro" wx:for="{{pros}}" wx:key="proid"  data-proid='{{item.proid}}' bindtap='toDetail'>
	 <view class="imgitem">
	    <image src="{{item.proimg}}"></image>
	  </view>
	  <view class="infoitem">
		    <view class="title">
		      {{item.proname}}
		    </view>
		    <view class="price">
		      ￥{{item.price}}
		    </view>
	  </view>
</view>

// components/prolist/prolist.js
methods: { 
// 编程式导航 跳转到详情页
    toDetail(a){
	      // console.log(a)   // 获取data-xxx数据
	      const {proid} =a.currentTarget.dataset
	      wx.navigateTo({
	        url: `/pages/detail/detail?proid=${proid}`
	      })
	    }
	  }

3.3详情页渲染

//pages/detail/detail.wxml

<view class="detailItem">
  <view class="detailImg">
    <image src="{{proDetail.proimg}}"/>
  </view>
  <view class="detailInfo">
    <view>{{proDetail.proname}}</view>
    <view class="detailPrice">￥{{proDetail.price}}</view>
    <view>{{proDetail.note}}</view>
  </view>
</view>

//pages/detail/detail.js

import { requestFn } from './../../utils/index.js' 
Page({
 onLoad: function (options) {
    // console.log(options,12) //获取编程导航地址栏携带信息
    this.getdetailDataFn(options)//调用产品详情页函数
  },

// 产品详情页
    getdetailDataFn(a) { 
      const { proid } = a	//获取详情页产品id
      requestFn({ url: '/pro/detail?proid=' + proid }).then(res => {
        var article = res.data.data.detail;
      this.setData({
        proDetail: res.data.data
      })
    })
  }
})

//utils/index.js //自定义的发起请求的函数

const baseUrl = 'http://daxun.kuboy.top/api'    
export function requestFn(options){
  const { url, data, method}=options;
  wx.showLoading({
     title:"加载中"
   })
   return new Promise((resolve,reject)=>{
     wx.request({
       url:baseUrl+url,
       data:data||{},
       method:method||'GET',
       success:(res)=>{
         resolve(res)
       },
       fail:err=>{
         reject(err)
       },
       complete:()=>{
         wx.hideLoading()
       }
     })
   })
}