feat： 首页拿米雅openId

src/actions/user.js

 import {
-  SET_USER_INFO
+  SET_USER_INFO,
+  SET_USER_OPENID
 } from '@/constants/user'
 
 export const setUserInfo = (data) => {
@@ -8,3 +9,10 @@ export const setUserInfo = (data) => {
     payload: data
   }
 }
+
+export const setUserOpenId = (data) => {
+  return {
+    type: SET_USER_OPENID,
+    payload: data
+  }
+}

src/app.jsx

 import Taro, { Component } from '@tarojs/taro'
 import { Provider } from '@tarojs/redux'
 
-import Index from './pages/index'
+import Index from './pages/home'
 import save from './actions/nav'
 import configStore from './store'
 
@@ -41,6 +41,7 @@ class App extends Component {
   }
   config = {
     pages: [
+      'pages/home/index',
       'pages/index/index',
       'pages/citySelect/index',
       'pages/storeDetail/index',

src/constants/user.js

 export const SET_USER_INFO = 'set user info';
+export const SET_USER_OPENID = 'set user openId';

src/lib/util.js

+/*
+ * 版本号比较方法
+ * 传入两个字符串，当前版本号：curV；比较版本号：reqV
+ * 调用方法举例：compare("1.1","1.2")，将返回false
+ */
+export function versionCompare(curV, reqV) {
+  if (curV && reqV) {
+    //将两个版本号拆成数字
+    var arr1 = curV.split("."),
+      arr2 = reqV.split(".");
+    var minLength = Math.min(arr1.length, arr2.length),
+      position = 0,
+      diff = 0;
+    //依次比较版本号每一位大小，当对比得出结果后跳出循环（后文有简单介绍）
+    while (
+      position < minLength &&
+      (diff = parseInt(arr1[position]) - parseInt(arr2[position])) == 0
+    ) {
+      position++;
+    }
+    diff = diff != 0 ? diff : arr1.length - arr2.length;
+    //若curV大于reqV，则返回true
+    return diff > 0;
+  } else {
+    //输入为空
+    console.log("版本号不能为空");
+    return false;
+  }
+}
+

src/pages/home/index.jsx

+import Taro, {Component} from '@tarojs/taro'
+import { View, Image, Text, WebView} from '@tarojs/components'
+import { connect } from '@tarojs/redux'
+import { setUserOpenId } from '@/actions/user'
+import {versionCompare} from '@/lib/util'
+import './index.scss'
+
+@connect(({ user }) => ({
+  user
+}), (dispatch) => ({
+  setUserInfo (data) {
+    dispatch(setUserOpenId(data || {}))
+  },
+}))
+class Index extends Component {
+
+  state = {
+    payOpenIdExist: false, //支付公众号openid
+    platform: Taro.getEnv(),
+    startupPic: '',
+    webview: '',
+    SDKVersion: '',
+  }
+  componentWillReceiveProps (nextProps) {
+    console.log(this.props, nextProps)
+  }
+
+  componentWillUnmount () { }
+  componentDidMount() {
+    //设置页面地址开始加载H5页面
+    this.setState({
+      webview: this.genWxAuthH5({
+        platform: 'weixin',
+        merchant: '123',
+        app_id: 'wx16f1c332c4f9bd01',
+        logo: encodeURIComponent('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1586229157&di=6997346b65b0e2e2ff7a733ae9b5fcc5&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'||'')
+      })
+    }, () => {
+      console.log('我是h5的链接', this.state)
+    })
+    setTimeout(()=>{
+      Taro.navigateTo({
+        url: '/pages/index/index'
+      })
+    }, 2000)
+  }
+  componentDidShow () { }
+
+  componentDidHide () { }
+  // 查看支持的版本
+  supportedWxSdk = () => {
+    const res = Taro.getSystemInfoSync()
+    this.setState({
+      SDKVersion: res.SDKVersion
+    })
+		return versionCompare(res.SDKVersion, '2.1.0')
+  }
+  /**
+   * 网页加载失败
+   * @param {Object}
+   */
+  webViewError = (e) => {
+    console.log('h5加载失败')
+  }
+  webViewSucess = (e) => {
+    console.log('h5加载成功', e)
+  }
+  /**需要
+   * 接收微信H5静默授权的网页发送的消息
+   * 注：执行到该方法时，H5静默授权页面已经开始跳转页面了（H5完成的业务逻辑：1.静默授权，2.不通过首页过渡的页面直接跳转到该页面）
+   */
+  wxWebMessage (e) {
+    console.log('h5加载成功.........', e)
+    let {data=[]} = e.detail
+    if(typeof data.slice !== 'function'){
+      data = [data]
+    }
+    let page = decodeURIComponent(this.launch.page)
+    //处理H5中不能处理的逻辑：通过首页过渡打开目标页面【打开方式， 1：到首页过渡， 2： 不通过首页过渡（专属活动使用较多）】
+    setTimeout(()=>{
+      Taro.navigateTo({
+        url: '/pages/index/index'
+      })
+    }, 2000)
+
+    data.forEach(item=>{
+      if(item.type === 'auth'){
+        this.props.setUserInfo({
+          payOpenId: item.data.openId,
+          clientId: Config.clientId
+        })
+      }
+    })
+  }
+  /**需要
+   * 生成微信H5授权地址
+   */
+  genWxAuthH5(params={}){
+    let href = 'https://hh-oss-html.miyapay.com/saas/prod/wx_pay_auth/index.html', h5Params = []
+    for(let key in params){
+      h5Params.push(`${key}=${params[key]}`)
+    }
+    if(h5Params.length>0){
+      href = `${href}?${h5Params.join('&')}`
+    }
+
+    //https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=APPID&scope=SCOPE&redirect_uri=ENCODED_URL
+    let options = [
+      `appid=wx273772ce26499402`,
+      `redirect_uri=${encodeURIComponent(href)}`,
+      `response_type=code`,
+      `scope=snsapi_base`
+    ]
+    // window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?${params.join('&')}`);
+    return `https://open.weixin.qq.com/connect/oauth2/authorize?${options.join('&')}#wechat_redirect`
+  }
+  render () {
+    const { webview, SDKVersion} = this.state
+    return (
+      <View className='page'>
+        <View>
+          {this.supportedWxSdk() && 
+            <View>
+              <Text>{webview}</Text>
+              <WebView
+                className='webview'
+                src={webview}
+                onError={this.webViewError}
+                onLoad={this.webViewSucess}
+                onMessage={this.wxWebMessage}
+              >
+              </WebView>
+            </View>
+          }
+          {
+            !this.supportedWxSdk() && 
+            <View>
+              <Text>当前客户端较低【{SDKVersion || '--'}】，请升级至最新版本 ~</Text>
+            </View>
+          }
+        </View>
+        <View class='wrapper'>
+          <View>
+            <View class='shopView animated fadeInDown'>
+              <Image mode='widthFix' class='shopImage' style='width:300rpx;height:300rpx' src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1586229157&di=6997346b65b0e2e2ff7a733ae9b5fcc5&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'></Image>
+            </View>
+          </View>
+        </View>
+      </View>
+    )
+  }
+}
+
+export default Index

src/pages/home/index.scss

+// .page {
+//   width: 1000px;
+//   height: 100%;
+//   background: white;
+// }
+
+// .wrapper {
+//   width: 100%;
+//   height: 100vh;
+//   background: white;
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   padding-bottom: 100rpx;
+// }
+
+// .content {
+//   text-align: center;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   flex-direction: column;
+// }
+
+// .shopView {
+//   text-align: center;
+// }
+
+
+// .shopImage {
+//   width: 236rpx;
+// }
+.webview {
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: #ccc;
+}
\ No newline at end of file

src/pages/index/index.jsx

 import Taro from '@tarojs/taro'
 import BaseComponent from '@/helper/baseComponent';
-import { View, Image, Text, Swiper, SwiperItem, ScrollView } from '@tarojs/components'
+import { View, Image, Text, Swiper, SwiperItem, ScrollView, Button } from '@tarojs/components'
 import { connect } from '@tarojs/redux'
 import { setUserInfo } from '@/actions/user'
 import NavBar from '@/components/NavBar'
@@ -51,6 +51,14 @@ class Index extends BaseComponent {
       url: '/pages/storeDetail/index'
     })
   }
+  // 获取用户信息
+  bindGetUserInfo = e => {
+    console.log(e)
+  }
+  // 获取手机号
+  bindGetPhoneNumber = e => {
+    console.log(e)
+  }
   render () {
     const {nav} = this.props
     const titleTop = (nav.globalData.navHeight - nav.globalData.navTop - 17) / 2 + nav.globalData.navTop
@@ -69,6 +77,8 @@ class Index extends BaseComponent {
             <Text className={`${noLoc ? 'no-loc' : ''}`}>{noLoc ? '未获取定位' : user.city}</Text>
           </View>
         </NavBar>
+        <Button openType='getUserInfo' onGetUserInfo={this.bindGetUserInfo}>授权登录</Button>
+        <Button openType='getPhoneNumber' onGetPhoneNumber={this.bindGetPhoneNumber}>授权手机号</Button>
         <Swiper
           className='swpier-view'
           indicatorColor='#999'

src/reducers/user.js

 import {
-  SET_USER_INFO
+  SET_USER_INFO,
+  SET_USER_OPENID
 } from '@/constants/user'
 import Taro from '@tarojs/taro';
 
@@ -19,6 +20,12 @@ export default function userInfo (state = INITIAL_STATE, action) {
         prevLongitude: state.longitude || '',
         prevLatitude: state.latitude || ''
       }
+    case SET_USER_OPENID:
+        // Taro.setStorageSync('user', JSON.stringify(action.payload || {}));
+        return {
+          ...state,
+          ...action.payload,
+        }
 
      default:
        return state