Taro教程之相亲类微信小程序开发实战-04首页和性别选择页

大家好，欢迎关注老夫撸代码。
在前面的教程中我们讲到了 使用Taro开发一款相亲类微信小程序--小程序登录以及获取用户信息,
今天我们主要讲一下小程序首页的开发以及性别选择页的开发，中间涉及到一些组件开发的例子以及Mobx的概念。

Taro微信小程序首页开发

我们先看一下效果图：

QQ20190109-103244.png

因为是相亲类的小程序，所以首页一定是需要吸引人眼球的，不然没人会点击进来看。大家通常在App端见到的开屏首页，在小程序里是没法做的，我们只能是在首页做文章。

首先找一张背景图，让背景图撑满整个屏幕，我们必须去掉小程序默认的状态栏和导航，找到Taro项目中的app.js，修改配置如下:

config = {
    pages: ["pages/index/index", "pages/choosesex/choosesex"],
    window: {
      backgroundTextStyle: "light",
      navigationBarBackgroundColor: "#FF4D56",
      navigationStyle: "custom",
      navigationBarTextStyle: "white",
      navigationBarTitleText: "脱单在太原"
    }
  };

上述代码中起决定性作用的是这个配置: navigationStyle: "custom"，导航栏样式，仅支持以下值：

1. default 默认样式
2. custom 自定义导航栏，只保留右上角胶囊按钮

在app.js中配置后，后面所有页面的的导航栏都将会失效，如果需要在某个页面启用小程序默认的导航栏可以在所需页面配置如下:

config = {
    navigationBarTitleText: "脱单在太原",
    navigationStyle: "default"
  };

小程序默认导航栏的背景只能是纯色背景，无法设置背景图片，如果想开发一些个性化的导航栏，只能是自定义配置。
现在附上首页的代码和样式:
index.js

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import { AtButton } from 'taro-ui'
import api from "../../config/api";
import './index.less'
import bg from '../../assets/images/bg.jpg'

@inject("counterStore")
@observer
class Index extends Component {
config = {
  navigationBarTitleText: "脱单在太原",
};

componentWillMount() {}

componentWillReact() {
  console.log("componentWillReact");
}

componentDidMount() {}

componentWillUnmount() {}

componentDidShow() {}

componentDidHide() {}

increment = () => {
  const { counterStore } = this.props;
  counterStore.increment();
};

decrement = () => {
  const { counterStore } = this.props;
  counterStore.decrement();
};

incrementAsync = () => {
  const { counterStore } = this.props;
  counterStore.incrementAsync();
};

tobegin = (e) => {

  const {userInfo} = e.detail;

  if (e.detail.errMsg == 'getUserInfo:ok'){

    if (!Taro.getStorageSync("userinfo")){

      Taro.request({
        url: api.saveWeixin,
        data: {
          session3rd: Taro.getStorageSync("session3rd"),
          nickName: userInfo.nickName,
          avatarUrl: userInfo.avatarUrl
        },
        header: {
          "content-type": "application/x-www-form-urlencoded" // 默认值
        },
        method: "POST",
        success: function (res) {
          console.log(res);
          Taro.setStorage({ key: "userinfo", data: userInfo });
        },
        fail: function (err) {
          console.log(err);
        }
      }).then(res=>{

        Taro.navigateTo({
          url: '/pages/choosesex/choosesex'
        })

      })

    }else{

      Taro.navigateTo({
        url:'/pages/choosesex/choosesex'
      })

    }




  }



};

render() {
  const {
    counterStore: { counter }
  } = this.props;
  return <View className="index">
      <Image src={bg} mode="aspectFill" />
      <View className="btn_container">
        <View className="btn_warper" hoverClass="btn_warper_hover">
          <Button className="btn" openType="getUserInfo" onGetUserInfo={this.tobegin}>
            开启缘分
          </Button>
        </View>
      </View>
    </View>;
}
}

export default Index

index.less

page{
    height: 100%;
}
.index {
    height: inherit;
    overflow: hidden;
    position: relative;
    image{
        height: inherit;
        width: 100%;
    }
    .btn_container{
        position: fixed;
        bottom: 50%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

        .btn_warper_hover{
                opacity: 0.8;
            }
        .btn_warper{
            width: 200px;
            height: 200px;
            overflow: hidden;
            border-radius: 100%;
            background-color:rgb(143, 0, 63);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0px 0px 10px 10px rgba(143, 0, 63,.8);
            .btn{
                color: #ffffff;
                font-size: 28px;
                background-color:transparent !important;
                border: none !important;
                height: 100%;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .btn::after{
                border: none;
            }
        }
        .btn_container_1{
            color: #ffffff;
            font-size: 28px;
        }
    }

}

小程序性别选择页开发

一款相亲类的应用一定是一步一步引导用户完成注册信息，而不是把一大堆表单推给用户，给用户造成困难也就是给自己造成困难，用户的体验度可想而知。
基于上述的原因，我们先开发一个性别选择页，收集用户的性别信息。
首先在Taro的pages的文件夹下新建文件夹及文件如下：

1. src/pages/choosesex/choosesex.js
2. src/pages/choosesex/choosesex.less
choosesex.js代码如下

import Taro, { Component } from "@tarojs/taro"
import { View } from "@tarojs/components"
import { AtButton } from "taro-ui";
import Util from '../../util/util'
import { observer, inject } from "@tarojs/mobx";
import Navbar from "../../components/navbar/navbar";
import './choosesex.less'
import Banner from '../../components/banner/banner'
import male from "../../assets/images/male.jpeg"
import female from "../../assets/images/female.jpeg"


@inject("formStore")
@observer
class Choosesex extends Component {
  constructor(props) {
    super(props);
  }

  config = {
    navigationBarTitleText: "脱单在太原",
  };

  state = {
    bgimg: "http://qiniu.cdn.colorlib.cn/navbg.jpg",
    male: "",
    female: "",
    height: 0,
    statusBarHeight: 0
  };

  componentWillMount() {
    Util.getNavInfo().then(res => {
      this.setState({
        height: res.height,
        statusBarHeight: res.statusBarHeight
      });
    });
    this.setState({ male: male, female: female });
  }

  choosesex(sex) {
    const { formStore } = this.props;

    formStore.setGender(sex);
  }

  render() {
    const {
      formStore: { gender }
    } = this.props;
    console.log(gender);
    return (
      <View
        className="container"
        style={{ paddingTop: this.state.height + "px" }}
      >
        <Navbar
          height={this.state.height}
          statusBarHeight={this.state.statusBarHeight}
          bgimg={this.state.bgimg}
          size="28"
          color="#ffffff"
          icon="chevron-left"
          title="完善资料"
        />
        <Banner title="请选择性别" style="width:100%" />
        <View className="content">
          <View className="content_1">
            <View className="male">
              <View
                className={gender == "male" ? "warper choose" : "warper"}
                onClick={this.choosesex.bind(this, "male")}
              >
                <Image mode="aspectFit" src={this.state.male} />
                <View className="label">帅哥</View>
              </View>
            </View>
            <View className="female">
              <View
                className={gender == "female" ? "warper choose" : "warper"}
                onClick={this.choosesex.bind(this, "female")}
              >
                <Image mode="aspectFit" src={this.state.female} />
                <View className="label">美女</View>
              </View>
            </View>
          </View>
          <View className="btn">
            <AtButton className="btn_bg" size="normal" circle={true}>
              下一步
            </AtButton>
            <View className="title">已有账号，直接登陆</View>
          </View>
        </View>
      </View>
    );
  }
}

export default Choosesex;

choosesex.less 代码如下

page {
  height: 100%;
  background-color: #f2f2f2;
}

.container {
  position: relative;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.content {
  margin-top: 20px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  height: 100%;
}
.content_1 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 20px;
  .male,
  .female {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;

    .warper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      padding: 15px;
      border: 3px solid #ffffff;
      box-sizing: border-box;
      image {
        width: 100%;
        height: 100%;
      }
      .label {
        padding-top: 20px;
        font-size: 28px;
      }
    }
  }
}
.choose {
  border: 3px solid rgb(255, 120, 111) !important;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 5px rgba(255, 120, 111, 0.8);
}
.btn {
  width: 80%;
  padding-top: 50px;
  margin: 0 auto;

  .btn_bg {
    background-color: #ff786f;
    color: #ffffff !important;
    box-shadow: 0px 0px 2px 2px rgba(255, 120, 111, 0.5);
    border: none !important;
  }

  .title {
      margin-top: 30px;
      color: #ff786f;
      font-size: 28px;
      text-align: center;
  }

上述代码中主要是如何获取微信小程序的状态栏以及导航栏的高度？
看如下代码:

import Taro from "@tarojs/taro";

export default {

    getNavInfo:() =>{

        return new Promise((resolve,reject) => {

            Taro.getSystemInfo().then(res => {

                const jn = wx.getMenuButtonBoundingClientRect()
                const height = jn.top + jn.height + (jn.top - res.statusBarHeight)
                resolve({ statusBarHeight: res.statusBarHeight, height: height })
            }).catch(err => {
                reject(err)
            })
        })
    }
}

1. Taro.getSystemInfo()是获取状态栏的高度,
2. wx.getMenuButtonBoundingClientRect()是胶囊的位置以及高度。

通过胶囊的位置减去状态栏的高度可以作为导航栏的padding-top 和 padding-bottom，把胶囊的高度作为导航栏的内高度。

QQ20190109-140100.png

搜索微信公众号：老夫撸代码 回复数字 1004 获取完整教程以及代码仓库地址

关注微信公众号：老夫撸代码

老夫撸代码

---