Store/storeShop 前端的展示路径

WxStoreController

@RestController
@RequestMapping("/wx/store")    
@Validated
public class WxStoreController {
    private final Log logger = LogFactory.getLog(WxStoreController.class);//日志
    @Autowired
    private LitemallStoreService litemallStoreService;
    @GetMapping("/storeShop")
    public Object storeShop(Integer pageNum, Integer pageSize) {
        List<LitemallStore> ls = litemallStoreService.findWxAllShop(pageNum,pageSize);
        ArrayList<Object> entity = new ArrayList<>(ls);
        return ResponseUtil.ok(entity);
    }
}

1、WxStoreController通过调用 Service层 LitemallStoreService.findWxAllShop方法将返回的数据进行分页

LitemallStoreService

@Service
public class LitemallStoreService {
    @Resource
    private LitemallStoreMapper storeMapper;
?
    public List<LitemallStore> findWxAllShop(Integer pageNum,Integer pageSize){
        PageHelper.startPage(pageNum,pageSize);
        return storeMapper.selectWxShop();
    }
}

2.LitemallStoreService则通过LitemallStoreMapper接口中的selectWxShop方法获取数据

LitemallStoreMapper

@Mapper
public interface LitemallStoreMapper {
    
    List<LitemallStore> selectWxShop();
    
}

通过对应的LitemallStoreMapper中的Sql语句 对数据进行查找

LitemallStoreMapper.xml

<select id="selectWxShop" parameterType="java.util.List" resultMap="BaseResultMap">
   
    select
    <include refid="Base_Column_List" />
    from litemall_store
?
</select>

微信小程序概念

微信小程序页面跳转的三种方式

一、

wx.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

 onLoad: function(options) {
        wx.navigateTo({
               url: ‘../index/index‘
        })
  }

二、

wx.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

onLoad: function(options) {
        wx.redirectTo({
               url: ‘../index/index‘
        })
  }

三、

wx.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

onLoad: function(options) {
        var pages = getCurrentPages()
        var num = pages.length
        navigateBack:function(){
            wx.navigateBack({
                 delta: num
            })
        }
 }

App()

App()函数用来注册一个小程序。接受一个object参数，其指定小程序的生命周期函数等。

object参数说明：

微信小程序 注册页面 Page()函数

Page

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

object 参数说明

微信小程序 列表渲染 wx:for

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view class=‘tablescenter‘ wx:for="{{storeShopM}}" wx:for-index="idx"wx:key="prototype">
    <view class="weui-media-box weui-media-box_appmsg md-pd">
        <view class=" md-s">
            <image class="weui-media-box__thumb md-img" src="{{item.pictUrl}}"  />
        </view>
        <view class="weui-media-box__bd">
            <view class=‘"weui-media-box__desc"‘>店铺名称: {{item.name}}</view>
            <view class=‘"weui-media-box__desc"‘>电话: {{item.phone}}</view>
            <view class=‘"weui-media-box__desc"‘>详细地址: {{item.address}}</view>
        </view>
    </view>
</view>

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

前端返回的数据应该对应 WxStoreController 方法中的pageNum&pageSize参数

public Object storeShop(Integer pageNum, Integer pageSize) 

 data: {
        pageNum: that.data.pageNum,
        pageSize: that.data.pageSize
      },

OnLoad 监听页面加载

在创建一个页面时OnLoad应该重新调用该方法

 getXXX: function () {
 }

onLoad: function() {
    this.getXXX();
  },

在Json中开启自动刷新

1、下拉刷新enablePullDownRefresh的支持

配置json文件

 {
 "navigationBarTitleText": "XXX" ,  //页面标题
 "enablePullDownRefresh": true      //开启自动刷新
 }

2、stopPullDownRefresh 停止下拉刷新

3、onPullDownRefresh 监听用户下拉动作

微信小程序开发