Django实战-小程序端应用功能

小团子

发布于 2019-09-24 15:47:05

6680

发布于 2019-09-24 15:47:05

文章被收录于专栏：数据云团数据云团

Django实战-日志邮件通知

Django网络应用开发的5项基础核心技术包括模型（Model）的设计，URL 的设计与配置，View（视图）的编写，Template（模板）的设计和Form(表单)的使用。

在完成了天气查询应用、星座和股票资讯信息应用、图片管理应用后，需要将这些应用的API对接到小程序端，方便用户能正常使用小程序助手。

一、用户应用添加列表

在 navigator 中分别对应着三个应用的跳转，分别是我关注的城市、我关注的股票、我关注的星座。

① 关注的城市

data-type="focusCity" bindtap='onNavigatorTap'

② 关注的股票

data-type="focusStock" bindtap='onNavigatorTap'

③ 关注的星座

data-type="focusConstellation" bindtap='onNavigatorTap'

<view class='container'>
  <view class='weui-panel'>
    <view class='weui-panel__bd'>
      <view class='weui-media-box weui-media-box_small-appmsg'>
        <view class="weui-cells weui-cells_in-small-appmsg">
          <navigator class='weui-cell weui-cell_access' hover-class='weui-cell_active' data-type="focusCity" bindtap='onNavigatorTap'>
            <view class='weui-cell__hd'>
              <image src='{{icon20}}' style='width:20px;height:20px;margin-right:5px'></image>
            </view>
            <view class='weui-cell__bd weui-cell_primary'>
              <view>我关注的城市</view>
            </view>
            <view class='weui-cell__ft weui-cell__ft_in-access'></view>
          </navigator>
          <navigator class='weui-cell weui-cell_access' hover-class='weui-cell_active' data-type="focusStock" bindtap='onNavigatorTap'>
            <view class='weui-cell__hd'>
              <image src='{{icon20}}' style='width:20px;height:20px;margin-right:5px'></image>
            </view>
            <view class='weui-cell__bd weui-cell_primary'>
              <view>我关注的股票</view>
            </view>
            <view class='weui-cell__ft weui-cell__ft_in-access'></view>
          </navigator>
          <navigator class='weui-cell weui-cell_access' hover-class='weui-cell_active' data-type="focusConstellation" bindtap='onNavigatorTap'>
            <view class='weui-cell__hd'>
              <image src='{{icon20}}' style='width:20px;height:20px;margin-right:5px'></image>
            </view>
            <view class='weui-cell__bd weui-cell_primary'>
              <view>我关注的星座</view>
            </view>
            <view class='weui-cell__ft weui-cell__ft_in-access'></view>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</view>

二、onNavigatorTap 函数实现

在应用跳转前，需要用户先授权登录

  // navigator 跳转处理
  onNavigatorTap: function(event){
    var that = this
    var promise = authUtil.getStatus(app)
    promise.then(function(status){
      if (status) {
        that.setData({
          isLogin: true
        })
        app.setAuthStatus(true)
      } else {
        that.setData({
          isLogin: false
        })
        app.setAuthStatus(false)
        wx.showToast({
          title: '请先授权登录',
        })
      }

      if (status) {
        // 配置全局状态
        app.setAuthStatus(true)
        // 获取有 data-type 标签传递过来的参数
        console.log(event.currentTarget.dataset.type)
        var navigatorType = event.currentTarget.dataset.type
        if (navigatorType == "focusCity") {
          navigatorType = "city"
        } else if (navigatorType == "focusStock") {
          navigatorType = "stock"
        } else {
          navigatorType = "constellation"
        }
        var url = '../picker/picker?type=' + navigatorType
        console.log("navigateTo url: " + url)
        wx.navigateTo({
          url: '../picker/picker?type=' + navigatorType,
        })
      }
    })
  },

三、跳转页面