Page({
    onLoad() {
        this.backgroundAudioManager = wx.getBackgroundAudioManager();
        this.backgroundAudioManager.onPlay(() => {...});
        this.backgroundAudioManager.onPause(() => {...});
        this.backgroundAudioManager.onEnded(() => {...});
        this.backgroundAudioManager.onStop(() => {...});
        this.backgroundAudioManager.onTimeUpdate(() => {...});
    },
    handleVoicePlay(this: PageData, e: PageCustomEvent) {
        // title 必须设置，否则 ios 会报错
        this.backgroundAudioManager.title = '标题';
        this.backgroundAudioManager.coverImgUrl = '图片 url';
        this.backgroundAudioManager.src = e.target.dataset.src;
        this.backgroundAudioManager.startTime = 0;
    },
    handleVoicePause(this: PageData) {
        this.backgroundAudioManager.stop();
    },
    handleVoiceSeek(this: PageData, e: PageCustomEvent) {
        this.backgroundAudioManager.seek(e.detail.value);
    },
})

// wxml
<swiper indicator-dots="{{true}}" previous-margin="8px" next-margin="8px" bindchange="bindSwiperChange">
  <swiper-item wx:for="{{[1, 2, 3]}}" wx:key="{{index}}" class="swiperItem">
    <view class="ruleCard {{currentSwiperItem < index && 'hiddenLeft'}} {{currentSwiperItem > index && 'hiddenRight'}}">
      {{item}}
    </view>
  </swiper-item>
</swiper>
// js
Page({
  data: {
    currentSwiperItem: 0,
  },
  bindSwiperChange(e) {
    this.setData({
      currentSwiperItem: e.detail.current,
    });
  },
});
// wxss
swiper {
  width: 100vw;
  height: 363rpx;
}
.swiperItem {
  display: flex;
  justify-content: center;
  width: calc(100vw - 16px) !important;
}
.ruleCard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100vw - 40px);
  height: 363rpx;
  background: skyblue;
  background-size: cover;
  border-radius: 6px;
}
.hiddenLeft {
  position: relative;
  left: -10px;
}
.hiddenRight {
  position: relative;
  right: -10px;
}

import { setCookie } from './actions/cookie';
import { LocationParam, updateLocation } from './actions/router';
import { setUserInfo } from './actions/userInfo';
import config from './config';
import configureStore from './configureStore';
import { query } from './createApolloClient';
import updateOwnerInfo from './graphql/updateOwnerInfo';
import viewer from './graphql/viewer';
import Provider from './utils/Provider';
const configuredStore = configureStore();
const appConfig: wx.AppParam = {
  getUserInfo() {
    wx.getUserInfo({
      fail: () => {
        this.globalData.authorized = false;
        wx.redirectTo({
          url: '/pages/authorize/authorize',
        });
      },
      success: res => {
        this.saveUserInfo(res.userInfo);
        // 后台保存用户信息
        query({
          query: updateOwnerInfo,
          variables: {
            input: {
              wxInfo: res.userInfo,
            },
          },
        });
      },
      withCredentials: true,
    });
  },
  saveUserInfo(userInfo: wx.UserInfo) {
    this.globalData.authorized = true;
    configuredStore.store.dispatch(setUserInfo(userInfo));
  },
  onLaunch() {
    wx.showLoading({
      title: '加载中',
      mask: true,
    });
    // 登录
    wx.login({
      success: res => {
        if (res.code) {
          wx.request({
            url: `${config.requestUrl}/api/login`,
            data: {
              code: res.code,
            },
            method: 'POST',
            success: (requestRes: any) => {
              console.log('登录成功===', requestRes);
              const cookie = requestRes.data.cookie || '';
              this.globalData.cookie = cookie;
              configuredStore.apolloClient.query({
                query: viewer,
              });
              configuredStore.store.dispatch(setCookie(cookie));
              wx.hideLoading();
              // 授权，放着这里是因为获取用户信息后需要同步到后端，需要 cookie
              this.getUserInfo();
            },
          });
        } else {
          console.log('登录失败===', res);
        }
      },
    });
    // 记录屏幕宽度
    this.globalData.windowWidth = wx.getSystemInfoSync().windowWidth;
  },
  onHide() {
    // 小程序退到后台时触发
    // configuredStore.persistStore();
  },
  onLocationChange(param: LocationParam) {
    configuredStore.store.dispatch(updateLocation(param));
  },
  globalData: {
    authorized: false,
    cookie: '',
    apolloClient: configuredStore.apolloClient,
    query,
    persistStore: configuredStore.persistStore,
    store: configuredStore.store,
  },
};
App(Provider(configuredStore.store)(appConfig));

// 创建订单
app.globalData.query({
    query: createOrderMutation,
    variables,
}).then((createOrderRes: any) => {
    if (createOrderRes.errors) {
        wx.showToast({
            title: '创建订单失败',
            icon: 'none',
        });
    } else {
        // 获取支付参数
        wx.request({
            url: `${config.requestUrl}/api/beecloud/forward`,
            data: {
              bill_no: createOrderRes.data.createOrder.id,
            },
            header: {
              cookie: app.globalData.cookie,
            },
            method: 'POST',
            success: (requestRes: any) => {
                // 发起支付
                wx.hideLoading();
                wx.requestPayment({
                    timeStamp: requestRes.data.timestamp,
                    nonceStr: requestRes.data.nonce_str,
                    package: requestRes.data.package,
                    signType: requestRes.data.sign_type,
                    paySign: requestRes.data.pay_sign,
                    success: () => {
                        // 支付成功后的操作
                        ...
                    },
                });
            },
        });
    }
}).catch((createOrderError: any) => {
    throw createOrderError;
});

{
  "usingComponents": {
    "voice": "/components/voice/voice",
  }
}

Page({
    ...
    handleVoiceSeek(e) {
        // e.detail 内是 Component 传入的参数，还可通过 e.target.dataset.src 获取调用组件时传入的 data-src 参数
        this.backgroundAudioManager.seek(e.detail.value);
    },
});

<view>
    <voice
        data-src="{{particle.audio.uri}}"
        bind:_handleVoiceSeek="handleVoiceSeek"
        src="{{particle.audio.uri}}"
        playing="{{true}}"
        currentTime="{{particle.audio.currentTime}}"
        duration="{{particle.audio.duration}}"
        formatedCurrentTime="{{particle.audio.formatedCurrentTime}}"
        formatedEndedTime="{{particle.audio.formatedEndedTime}}"
    >
        <view slot="content">这里是插入到组件slot中的内容</view>
    </voice>
</view>

{
  "component": true
}

Component({
  options: {
    multipleSlots: true, // 在组件定义时的选项中启用多slot支持
  },
  methods: {
    _handleSeek(e) {
        // 此处的参数 e 是 slider 传入的，触发调用处的 bind:_handleVoiceSeek 对应的 js 中定义的方法并传入参数，也就是调用 handleVoiceSeek 方法
        this.triggerEvent('_handleVoiceSeek', { value: e.detail.value });
    },
  },
  properties: {
    src: {
      type: String,
    },
    playing: {
      type: Boolean,
    },
    currentTime: {
      type: Number,
    },
    duration: {
      type: Number,
    },
    formatedCurrentTime: {
      type: String,
    },
    formatedEndedTime: {
      type: String,
    },
  },
});

<view class="container">
    <image wx:if="{{playing}}" class="icon" src="/images/pause.png" />
    <image wx:else class="icon" src="/images/play.png" />
    <view class="sliderContainer">
        <slider min="0" max="{{duration}}" value="{{currentTime}}" bindchange="_handleSeek" />
        <view class="time">
            <text>{{formatedCurrentTime}}</text>
            <text>{{formatedEndedTime}}</text>
        </view>
    </view>
    <slot name="content" />
</view>

@media  (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
  .imgTest{
    background: url(https://images/2x.png) no-repeat;
  }
}
@media  (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
  .imgTest{
    background: url(https://images/3x.png) no-repeat;
  }
}

// 获取设备像素比，在 wxml 中根据不同像素比显示不同图片
const getPixelRatio = () => {
  let pixelRatio = 0
  wx.getSystemInfo({
    success: function (res) {
      pixelRatio = res.pixelRatio
    },
    fail: function () {
      pixelRatio = 0
    }
  })
  return pixelRatio
}

import ApolloClient from 'apollo-client';
import { applyMiddleware, combineReducers, createStore, Store } from 'redux';
import { getStoredState, persistReducer, persistStore } from 'redux-persist';
import thunk from 'redux-thunk';
import createApolloClient from './createApolloClient';
import reducer from './reducers/index';
import WxStorage from './storage';
interface CreateRootReducer {
  apolloClient: ApolloClient;
}
function createRootReducer({ apolloClient }: CreateRootReducer) {
  return combineReducers({
    apollo: apolloClient.reducer(),
    ...reducer,
  });
}
let store: Store<{}>;
export default function configureStore() {
  const apolloClient = createApolloClient();
  const middleware = [thunk, apolloClient.middleware()];
  const enhancer = applyMiddleware(...middleware);
  const rootReducer = createRootReducer({ apolloClient });
  const persistConfig = {
    // active: true, // store 在每次变化后都会同步保存到 storage 中
    key: 'root',
    storage: WxStorage,
    version: 2,
  };
  const persistedReducer = persistReducer(persistConfig, rootReducer);
  // 将 storage 中保存的数据初始化给 store
  // 方式一
  const storedState = wx.getStorageSync('persist:root');
  const state: any = {};
  if (typeof storedState === 'string' && storedState) {
    const rawState = JSON.parse(storedState);
    Object.keys(rawState).forEach(key => {
      state[key] = JSON.parse(rawState[key]);
    });
  }
  // 方式二
  getStoredState(persistConfig)
    .then(res => {
      store.dispatch({
        key: 'root',
        payload: res,
        type: 'persist/REHYDRATE',
      });
    })
    .catch(error => {
      throw error;
    });
  store = createStore(persistedReducer, {}, enhancer);
  return {
    apolloClient,
    persistStore: () => persistStore(store), // 将 store 数据保存到 storage 中
    store,
  };
}

interface Storage {
  getItem(key: string, ...args: any[]): any;
  setItem(key: string, value: any, ...args: any[]): any;
  removeItem(key: string, ...args: any[]): any;
}
const WxStorage: Storage = {
  getItem: key =>
    new Promise((resolve, reject) => {
      wx.getStorage({
        fail: res => {
          reject(res);
        },
        key,
        success: res => {
          resolve(res.data);
        },
      });
    }),
  removeItem: key =>
    new Promise((resolve, reject) => {
      wx.removeStorage({
        fail: res => {
          reject(res);
        },
        key,
        success: res => {
          resolve(res);
        },
      });
    }),
  setItem: (key, data) =>
    new Promise((resolve, reject) => {
      wx.setStorage({
        data,
        fail: res => {
          reject(res);
        },
        key,
        success: res => {
          resolve(res);
        },
      });
    }),
};
export default WxStorage;

export default function warning(message: string) {
  if (typeof console !== 'undefined' && typeof console.error === 'function') {
    console.error(message);
  }
  try {
    // This error was thrown as a convenience so that if you enable
    // "break on all exceptions" in your console,
    // it would pause the execution at this line.
    throw new Error(message);
  } catch (e) {
    console.log(e);
  }
}

export default function shallowEqual(objA: any, objB: any) {
  if (objA === objB) {
    return true;
  }
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  if (keysA.length !== keysB.length) {
    return false;
  }
  let result = true;
  // Test for A's keys different from B.
  const hasOwn = Object.prototype.hasOwnProperty;
  keysA.forEach(keyA => {
    if (!hasOwn.call(objB, keysA) || objA[keyA] !== objB[keyA]) {
      result = false;
      return false;
    }
    return;
  });
  return result;
}

function bindActionCreator(actionCreator: any, dispatch: any) {
  return () => dispatch(actionCreator.apply(undefined, arguments));
}
function bindActionCreators(actionCreators: any, dispatch: any) {
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch);
  }
  if (typeof actionCreators !== 'object' || actionCreators === null) {
    throw new Error(
      'bindActionCreators expected an object or a function, instead received ' +
        (actionCreators === null ? 'null' : typeof actionCreators) +
        '. ' +
        'Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?',
    );
  }
  const keys = Object.keys(actionCreators);
  const boundActionCreators: any = {};
  keys.forEach(actionKey => {
    const tempActionCreator = actionCreators[actionKey];
    if (typeof tempActionCreator === 'function') {
      boundActionCreators[actionKey] = bindActionCreator(
        tempActionCreator,
        dispatch,
      );
    }
  });
  return boundActionCreators;
}
export default function wrapActionCreators(actionCreators: any) {
  return (dispatch: any) => bindActionCreators(actionCreators, dispatch);
}

import shallowEqual from './shallowEqual';
import warning from './warning';
import wrapActionCreators from './wrapActionCreators';
const defaultMapStateToProps = (state: object) => {
  console.log(state);
  return {};
};
const defaultMapDispatchToProps = (dispatch: any) => ({ dispatch });
export default function connect(mapStateToProps: any, mapDispatchToProps: any) {
  const shouldSubscribe = Boolean(mapStateToProps);
  const mapState = mapStateToProps || defaultMapStateToProps;
  const app = getApp();
  let mapDispatch: any;
  if (typeof mapDispatchToProps === 'function') {
    mapDispatch = mapDispatchToProps;
  } else if (!mapDispatchToProps) {
    mapDispatch = defaultMapDispatchToProps;
  } else {
    mapDispatch = wrapActionCreators(mapDispatchToProps);
  }
  return function wrapWithConnect(pageConfig: any) {
    function handleChange(this: any, options: any) {
      if (!this.unsubscribe) {
        return;
      }
      const state = this.store.getState();
      const mappedState = mapState(state, options);
      if (!this.data || shallowEqual(this.data, mappedState)) {
        return;
      }
      this.setData(mappedState);
    }
    let { onLoad: pageConfigOnLoad, onUnload: pageConfigOnUnload } = pageConfig;
    // 支持 Component 使用
    if (pageConfig.type === 'Component') {
      pageConfigOnLoad = pageConfig.attached;
      pageConfigOnUnload = pageConfig.detached;
    }
    function onLoad(this: any, options: any) {
      this.store = app.store;
      if (!this.store) {
        warning('Store对象不存在!');
      }
      if (shouldSubscribe) {
        this.unsubscribe = this.store.subscribe(
          handleChange.bind(this, options),
        );
        handleChange.call(this, options);
      }
      if (typeof pageConfigOnLoad === 'function') {
        pageConfigOnLoad.call(this, options);
      }
    }
    function onUnload(this: any) {
      if (typeof pageConfigOnUnload === 'function') {
        pageConfigOnUnload.call(this);
      }
      if (typeof this.unsubscribe === 'function') {
        this.unsubscribe();
      }
    }
    // 支持 Component 使用
    if (pageConfig.type === 'Component') {
      return Object.assign(
        {},
        pageConfig,
        {
          methods: {
            ...pageConfig.methods,
            ...mapDispatch(app.store.dispatch),
          },
        },
        {
          attached: onLoad,
          detached: onUnload,
        },
      );
    } else {
      return Object.assign({}, pageConfig, mapDispatch(app.store.dispatch), {
        onLoad,
        onUnload,
      });
    }
  };
}

import warning from './warning';
function checkStoreShape(store: object) {
  const missingMethods = ['subscribe', 'dispatch', 'getState'].filter(
    m => !store.hasOwnProperty(m),
  );
  if (missingMethods.length > 0) {
    warning(
      'Store 似乎不是一个合法的 Redux Store对象: ' +
        '缺少这些方法: ' +
        missingMethods.join(', ') +
        '。',
    );
  }
}
export default function Provider(store: object) {
  checkStoreShape(store);
  return (appConfig: object) => Object.assign({}, appConfig, { store });
}

export default {
  requestUrl: 'http://127.0.0.1:8888',
  pollInterval: 3000,
};

import ApolloClient, {
  createNetworkInterface,
  ObservableQuery,
  WatchQueryOptions,
} from 'apollo-client';
import config from './config';
interface CustomClient extends ApolloClient {
  allQueryWatchers?: Set<ObservableQuery<{}>>;
  watchQueryStart?: (options: WatchQueryOptions) => ObservableQuery<{}>;
}
// 封装通用 fetch，gql 返回类型就是 any
export const query = (input: any) => {
  return new Promise(resolve => {
    wx.request({
      ...input,
      data: {
        query: input.query.loc.source.body, // 获取查询语句字符串
        variables: input.variables || {},
      },
      method: 'POST',
      header: {
        cookie: getApp().globalData.cookie,
      },
      fail: res => {
        throw res;
      },
      success: res => {
        resolve(res.data);
      },
      url: `${config.requestUrl}/graphql`,
    });
  });
};
const client: CustomClient = new ApolloClient({
  networkInterface: {
    ...createNetworkInterface({
      opts: {
        credentials: 'include',
      },
      uri: `${config.requestUrl}/graphql`,
    }),
    query,
  },
  queryDeduplication: true,
  addTypename: false,
  reduxRootSelector: state => state.apollo,
});
export default function createApolloClient() {
  client.allQueryWatchers = new Set();
  // 封装通用 watchQuery，具有统一的轮询间隔
  client.watchQueryStart = function(options: WatchQueryOptions) {
    const queryWatcher = client.watchQuery(options);
    queryWatcher.startPolling(config.pollInterval);
    if (this.allQueryWatchers) {
      this.allQueryWatchers.add(queryWatcher);
    }
    return queryWatcher;
  };
  return client;
}

import gql from 'graphql-tag';
const products = gql`
  query Products {
    products {
      id
      name
      description
      amount
      code
      lectures {
        type
        lecture {
          ... on Live {
            __typename
            id
            name
            startDate
            endDate
          }
        }
      }
    }
  }
`;
export default products;

import productsQuery from '../../graphql/products';
const pageConfig: wx.PageParam = {
    onLoad() {
        app.globalData.apolloClient.query({
            query: productsQuery,
        });
    },
    ...
};
const mapStateToData = (state: any) => {
  const pagesInstance = getCurrentPages();
  let products: ProductType[] = [];
  pagesInstance.forEach(page => {
    // 通过路由判断找到当前 Page 实例，这样可以获取到当前页面的 data、options 等信息
    if (page.route === 'pages/home/home') {
      const data: ProductsType =
        state.apollo.data.ROOT_QUERY && state.apollo.data.ROOT_QUERY[`products`]
          ? app.globalData.apolloClient.readQuery({
              query: productsQuery,
            })
          : [];
      if (data.products) {
        products = data.products.map(product => {...});
      }
    }
  });
  return {
    products,
  };
};
const nextPageConfig = connect(mapStateToData, undefined)(pageConfig);
Page(nextPageConfig);

import gql from 'graphql-tag';
const createActivityRecord = gql`
  mutation CreateActivityRecord(
    $input: ActivityRecordInput!
    $byOrder: Boolean
  ) {
    createActivityRecord(input: $input, byOrder: $byOrder) {
      id
      product {
        id
        name
      }
    }
  }
`;
export default createActivityRecord;

app.globalData.query({
    query: createActivityRecord,
    variables: {
        input: {
            activityId: this.data.activityId,
            productId: this.data.productId,
            ownerId: this.data.ownerId,
        },
        byOrder: false,
    },
}).then((res: any) => {
    if (res.data.errors) {
        wx.showToast({
        title: '操作失败',
        icon: 'none',
        });
    } else {
        this.sendFlowerSuccess();
    }
});

// 全局 global 处理，lodash 中使用了 global
Object.assign(global, {
    Array,
    Date,
    Error,
    Function,
    Math,
    Object,
    RegExp,
    String,
    TypeError,
    setTimeout,
    clearTimeout,
    setInterval,
    clearInterval,
});
App({...});