项目基本配置

app.js

@@ -1,19 +1,33 @@
-// app.js
+import login from './utils/login'
+import * as httpUtil from "./utils/httpUtil";
+const app = getApp()
 App({
   onLaunch() {
     // 展示本地存储能力
     const logs = wx.getStorageSync('logs') || []
     logs.unshift(Date.now())
     wx.setStorageSync('logs', logs)
-
-    // 登录
-    wx.login({
-      success: res => {
-        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+    //获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度
+    wx.getSystemInfo({
+      success: (res) => {
+        this.globalData.client = {
+          //  窗口宽度和高度
+          windowWidth: res.windowWidth,
+          windowHeight: res.windowHeight,
+          // 状态栏高度
+          statusBarHeight: res.statusBarHeight
+        }
       }
     })
   },
   globalData: {
-    userInfo: null
-  }
+    userInfo: {},
+    // 微信用户openid，sessionKey
+    wxInfo: {},
+    client: {},
+    publicUrl: '', //
+  },
+  // 微信openid回调
+  toLogin: login.toLogin,
+  ...httpUtil
 })

app.json

@@ -1,14 +1,54 @@
 {
-  "pages":[
-    "pages/index/index",
-    "pages/logs/logs"
+  "pages": [
+    "pages/test/index",
+    "pages/index/index"
   ],
-  "window":{
-    "backgroundTextStyle":"light",
+  "usingComponents": {
+    "van-button": "/miniprogram_npm/vant-weapp/button/index",
+    "van-row": "/miniprogram_npm/vant-weapp/row/index",
+    "van-col": "/miniprogram_npm/vant-weapp/col/index",
+    "van-datetime-picker": "/miniprogram_npm/vant-weapp/datetime-picker/index",
+    "van-picker": "/miniprogram_npm/vant-weapp/picker/index",
+    "van-popup": "/miniprogram_npm/vant-weapp/popup/index",
+    "van-radio": "/miniprogram_npm/vant-weapp/radio/index",
+    "van-radio-group": "/miniprogram_npm/vant-weapp/radio-group/index",
+    "van-action-sheet": "/miniprogram_npm/vant-weapp/action-sheet/index",
+    "van-search": "/miniprogram_npm/vant-weapp/search/index",
+    "van-tree-select": "/miniprogram_npm/vant-weapp/tree-select/index",
+    "van-overlay": "/miniprogram_npm/vant-weapp/overlay/index",
+    "van-dialog": "/miniprogram_npm/vant-weapp/dialog/index",
+    "van-tab": "/miniprogram_npm/vant-weapp/tab/index",
+    "van-tabs": "/miniprogram_npm/vant-weapp/tabs/index",
+    "van-stepper": "/miniprogram_npm/vant-weapp/stepper/index",
+    "van-collapse": "/miniprogram_npm/vant-weapp/collapse/index",
+    "van-collapse-item": "/miniprogram_npm/vant-weapp/collapse-item/index",
+    "van-cell": "/miniprogram_npm/vant-weapp/cell/index",
+    "van-cell-group": "/miniprogram_npm/vant-weapp/cell-group/index",
+    "van-toast": "/miniprogram_npm/vant-weapp/toast/index",
+    "van-field": "/miniprogram_npm/vant-weapp/field/index",
+    "van-checkbox": "/miniprogram_npm/vant-weapp/checkbox/index",
+    "van-checkbox-group": "/miniprogram_npm/vant-weapp/checkbox-group/index",
+    "van-loading": "/miniprogram_npm/vant-weapp/loading/index",
+    "van-icon": "/miniprogram_npm/vant-weapp/icon/index",
+    "van-nav-bar": "/miniprogram_npm/vant-weapp/nav-bar/index",
+    "van-tabbar": "/miniprogram_npm/vant-weapp/tabbar/index",
+    "van-tabbar-item": "/miniprogram_npm/vant-weapp/tabbar-item/index",
+    "van-rate": "/miniprogram_npm/vant-weapp/rate/index"
+  },
+  "window": {
+    "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "Weixin",
-    "navigationBarTextStyle":"black"
+    "navigationBarTitleText": "烟草专卖边境打私信息共享软件",
+    "navigationBarTextStyle": "white",
+    "navigationStyle": "custom"
   },
-  "style": "v2",
-  "sitemapLocation": "sitemap.json"
-}
+  "requiredBackgroundModes": [
+    "location"
+  ],
+  "sitemapLocation": "sitemap.json",
+  "permission": {
+    "scope.userLocation": {
+      "desc": "你的位置信息将用于小程序位置接口的效果展示"
+    }
+  }
+}

commpents/mobile-frame/foot.js

@@ -0,0 +1,45 @@
+// commpents/mobile-frame/mobile-main.js
+const app = getApp()
+Component({
+  /**
+   * 组件的属性列表
+   */
+  options: { multipleSlots: true },
+  properties: {
+    tabSelectid: { type: 'string' }
+  },
+
+  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
+  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
+  ready: function () { },
+  pageLifetimes: {
+    // 组件所在页面的生命周期函数
+    show: function () { this.search() },
+    hide: function () { },
+    resize: function () { },
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    active: '0'
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 返回上一级
+    tabPath(e) {
+      this.triggerEvent('tabPath', { index: e.detail })
+    },
+    search() {
+      let pages = getCurrentPages();
+      let currentPage = pages[pages.length - 1];
+      if (currentPage.route == 'pages/market/index') {
+        this.setData({ active: 0 })
+      } else {
+        this.setData({ active: 1 })
+      }
+    }
+  }
+})

commpents/mobile-frame/foot.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

commpents/mobile-frame/foot.wxml

@@ -0,0 +1,6 @@
+<view class="foot">
+  <van-tabbar active="{{ active }}" bind:change="tabPath">
+    <van-tabbar-item icon="cart-o">采购</van-tabbar-item>
+    <van-tabbar-item icon="manager-o">个人中心</van-tabbar-item>
+  </van-tabbar>
+</view>

commpents/mobile-frame/foot.wxss

@@ -0,0 +1,6 @@
+.foot {
+  float: left;
+  width: 100%;
+  height: 48px;
+  border-top: 1px solid #666;
+}

commpents/mobile-frame/mobile-main.js

@@ -0,0 +1,49 @@
+// commpents/mobile-frame/mobile-main.js
+const app = getApp()
+Component({
+  /**
+   * 组件的属性列表
+   */
+  options: { multipleSlots: true },
+  properties: {
+    frameStyle: { type: Object }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    windowHeight: app.globalData.client.windowHeight,
+    statusBarHeight: app.globalData.client.statusBarHeight,
+    infoHeight: ''
+  },
+  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
+  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
+  ready: function () { },
+  pageLifetimes: {
+    // 组件所在页面的生命周期函数
+    show: function () { this.searchHeight() },
+    hide: function () { },
+    resize: function () { },
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 返回上一级
+    back() {
+      this.triggerEvent('back',)
+    },
+    tabPath(e) {
+      this.triggerEvent('tabPath', e)
+    },
+    searchHeight() {
+      let frameStyle = this.properties.frameStyle;
+      let client = app.globalData.client;
+      let infoHeight = client.windowHeight - 25 - client.statusBarHeight * 2;
+      if (frameStyle.useBar) infoHeight = infoHeight - 50;
+      if (infoHeight) this.setData({ infoHeight: infoHeight })
+    }
+  }
+})

commpents/mobile-frame/mobile-main.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "top": "./top",
+    "foot": "./foot"
+  }
+}

commpents/mobile-frame/mobile-main.wxml

@@ -0,0 +1,11 @@
+<view class="main">
+  <view class="top" wx:if="{{frameStyle.useTop}}">
+    <top frameStyle="{{frameStyle}}" bind:back="back"></top>
+  </view>
+  <view class="info" style='height:{{infoHeight}}px'>
+    <slot name="info"></slot>
+  </view>
+  <view class="foot" wx:if="{{frameStyle.useBar}}">
+    <foot tabSelectid="{{frameStyle.tabSelectid}}" bind:tabPath="tabPath"></foot>
+  </view>
+</view>

commpents/mobile-frame/mobile-main.wxss

@@ -0,0 +1,21 @@
+.main {
+  float: left;
+  width: 100%;
+}
+
+.main .one {
+  float: left;
+  width: 100%;
+}
+
+.main .info {
+  float: left;
+  width: 100%;
+  overflow-y: auto;
+  background-color: #f1f1f1;
+}
+
+.main .foot {
+  float: left;
+  width: 100%;
+}

commpents/mobile-frame/top.js

@@ -0,0 +1,26 @@
+// commpents/mobile-frame/top.js
+const app = getApp()
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    frameStyle: { type: Object }
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    statusBarHeight: app.globalData.client.statusBarHeight
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 返回上一页面
+    _navback() {
+      this.triggerEvent('back')
+    }
+  }
+})

commpents/mobile-frame/top.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

commpents/mobile-frame/top.wxml

@@ -0,0 +1,7 @@
+<view class="top" style='height: {{statusBarHeight*2 + 25}}px;line-height:{{statusBarHeight*2 + 35}}px'>
+  <view class="left" style='height: {{statusBarHeight*2 + 25}}px;padding: {{statusBarHeight + 12}}px 0;'>
+    <cover-image src='/image/back.png' mode='aspectFill' class="back" bindtap='_navback' wx:if="{{frameStyle.leftArrow}}"></cover-image>
+  </view>
+  <view class="cen" style='height: {{statusBarHeight*2 + 25}}px;'>{{frameStyle.name}}</view>
+  <view class="right" style='height: {{statusBarHeight*2 + 25}}px;' style="display: none">右侧</view>
+</view>

commpents/mobile-frame/top.wxss

@@ -0,0 +1,35 @@
+.top {
+  float: left;
+  width: 100%;
+  border-bottom: 1px solid #666;
+  background-color: #409eff;
+}
+
+.top .left {
+  float: left;
+  width: 15%;
+  text-align: center;
+}
+
+.top .left .back {
+  width: 40rpx;
+  height: 40rpx;
+  position: relative;
+  left: 15px;
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.top .cen {
+  float: left;
+  width: 70%;
+  text-align: center;
+  font-size: 36rpx;
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.top .right {
+  float: left;
+  width: 15%;
+}

pages/test/index.js

@@ -0,0 +1,70 @@
+// pages/login/login.js
+import * as methods from '../../utils/login'
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    frameStyle: { useTop: true, name: '测试', leftArrow: false, useBar: false }
+  },
+  login: function () {
+
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/test/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "mobile-main": "/commpents/mobile-frame/mobile-main"
+  }
+}

pages/test/index.wxml

@@ -0,0 +1,5 @@
+<mobile-main frameStyle="{{frameStyle}}" bind:back="back">
+  <view slot="info">
+    测试页面
+  </view>
+</mobile-main>

pages/test/index.wxss

@@ -0,0 +1,18 @@
+.one {
+  float: left;
+  width: 100%;
+}
+
+.one .one_1 {
+  float: left;
+  width: 100%;
+  text-align: center;
+  margin: 20px 0;
+  font-size: 25px;
+}
+
+.one .one_2 {
+  float: left;
+  width: 100%;
+  text-align: center;
+}

utils/httpUtil.js

@@ -0,0 +1,57 @@
+let baseUrl = "";
+const $get = (uri, data) => {
+  let app = getApp();
+  let tenant = app.tenant || "test";
+  return new Promise((resolve, reject) => {
+    wx.request({
+      url: `${baseUrl}${uri}`,
+      method: "get",
+      data,
+      header: { "x-tenant": tenant },
+      success: (res) => toResolve(resolve, res),
+      error: (e) => toReject(reject, e),
+    });
+  });
+};
+const $post = (uri, data) => {
+  let app = getApp();
+  let tenant = app.tenant || "test";
+  return new Promise((resolve, reject) => {
+    wx.request({
+      url: `${baseUrl}${uri}`,
+      method: "post",
+      data,
+      header: { "x-tenant": tenant },
+      success: (res) => toResolve(resolve, res),
+      error: (e) => toReject(reject, e),
+    });
+  });
+};
+const $delete = (uri, data) => {
+  let app = getApp();
+  let tenant = app.tenant || "test";
+  return new Promise((resolve, reject) => {
+    wx.request({
+      url: `${baseUrl}${uri}`,
+      method: "delete",
+      data,
+      header: { "x-tenant": tenant },
+      success: (res) => toResolve(resolve, res),
+      error: (e) => toReject(reject, e),
+    });
+  });
+};
+
+const toResolve = (resolve, result) => {
+  if (result.statusCode === 200) resolve(result.data);
+  else {
+    console.error("请求失败");
+  }
+};
+
+const toReject = (reject, result) => {
+  console.error(result);
+  reject(result);
+};
+
+module.exports = { $get, $post, $delete };

utils/login.js

@@ -0,0 +1,35 @@
+module.exports = {
+  toLogin() {
+    return new Promise((resolve, reject) => {
+      // 登录
+      wx.login({
+        success: res => {
+          const app = getApp()
+          const { code: js_code } = res
+          // 发送 res.code 到后台换取 openId, sessionKey, unionId
+          // wx.request({
+          //   url: `${app.globalData.publicUrl}/api/hc/wx/openid?js_code=` + js_code,
+          //   method: "get",
+          //   success: res => {
+          //     const { errcode, openid } = res.data
+          //     if (errcode === 0) {
+          //       const data = { openid }
+          //       app.globalData.wxInfo = data;
+          //       resolve(data);
+          //     }
+          //   },
+          //   error: err => {
+          //     wx.showToast({
+          //       title: err.msg,
+          //       icon: 'error'
+          //     })
+          //     reject('error');
+          //   }
+          // })
+        }
+      })
+
+
+    })
+  }
+}