前言

隨著社會的進步，無論是日常休息，還是上班作業，人們都在追求方便，伴隨著這些，手機成為了人類生活中不可缺少的一部分，于是小程式等手機端app就流行起來了，

Uni-app

是一個使用Vue.js開發所有前端應用的框架，開發者撰寫一套代碼，可發布到iOS、Android、Web（回應式）、以及各種小程式、快應用等多個平臺，

• HBuilderX開發（入口）
• Visual Studio Code開發（入口）

網上（入口）有著詳細的開發教程，這里我就不多說了，只說一些比較常見的知識，

頁面跳轉：

生命周期：

UviewUI

uView是uni-app生態專用的UI框架，uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者撰寫一套代碼， 可發布到iOS、Android、H5、以及各種小程式(微信/支付寶/百度/頭條/QQ/釘釘)等多個平臺(引言自uni-app網)，

vue.js有著自己合適的UI框架elementUI,當然uni-app也有著自己合適的UI框架，就是uviewUI（入口），同時它有著非常多的模板，可以直接下載使用，非常強大（地址），

接下里直接步入主題，上圖，

這邊我就拿首頁舉個例子吧，直接上代碼，

<template>
  <view class="wrap">
    <!--輪播圖-->
    <u-swiper :list="list" :title="true" mode="dot" duration="3000" :circular="false" :effect3d="true"></u-swiper>

    <!--滾動通知-->
    <u-notice-bar mode="horizontal" :is-circular="true" type="info" :list="noticelist"></u-notice-bar>

    <view class="title">推薦好物</view>
    <u-line color="black" />

    <u-tabs name="cate_name" count="cate_count" :list="tablist" :is-scroll="false" :current="current" @change="change">
    </u-tabs>
    <!--瀑布流-->
    <u-waterfall v-model="flowList" ref="uWaterfall" v-show="show">
      <template v-slot:left="{ leftList }">
        <view class="demo-warter" v-for="(item, index) in leftList" :key="index">
          <!-- 警告：微信小程式中需要hx2.8.11版本才支持在template中結合其他組件，比如下方的lazy-load組件 -->
          <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
          <view class="demo-title">
            {{item.title}}
          </view>
          <view class="demo-price">
            {{item.price}}元
          </view>

        </view>
      </template>
      <template v-slot:right="{ rightList }">
        <view class="demo-warter" v-for="(item, index) in rightList" :key="index">
          <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
          <view class="demo-title">
            {{ item.title }}
          </view>
          <view class="demo-price"> {{ item.price }}元 </view>

        </view>
      </template>
    </u-waterfall>

  </view>
</template>

<script>
  import axios from "axios";
  export default {
    data() {
      return {
        show: true,
        list: [],
        flowList: [],
        noticelist: [],
        tablist: [{
          cate_name: '飾品'
        }, {
          cate_name: '潮流'
        }, {
          cate_name: '鞋服',
        }],
        current: 0
      };
    },
    onReady() {
      //輪播圖
      var _this = this;
      axios.get("../../static/js/swiper.json").then(function (res) {
        _this.list = res.data.list;
        console.log(res.data);
      });
      //滾動通知
      axios.get("../../static/js/notice.json").then(function (res) {
        res.data.noticelist.forEach((item) => {
          _this.noticelist.push(item.title);
        });
      });

      axios.get("../../static/js/waterpull.json").then(function (res) {
        _this.flowList = res.data.flowList;

      });

    },
    onl oad() {

    },
    onReachBottom() {

    },
    methods: {
      change(index) {
        this.current = index;
        if (index == 0) {
          this.show = true
        } else {
          this.show = false
        }
      }
    },
  };
</script>

<style>
  /* page不能寫帶scope的style標簽中，否則無效 */
  page {
    background-color: rgb(240, 240, 240);
  }
</style>

<style lang="scss" scoped>
  .title {
    font-size: medium;
    font-weight: bolder;
  }

  .wrap {
    padding: 40rpx;
  }

  .demo-warter {
    border-radius: 8px;
    margin: 5px;
    background-color: #ffffff;
    padding: 8px;
    position: relative;
  }

  .u-close {
    position: absolute;
    top: 32rpx;
    right: 32rpx;
  }

  .demo-image {
    width: 100%;
    border-radius: 4px;
  }
</style>

這邊利用了uviewUI，同時資料不是死資料，是自己新建json檔案，利用axios獲取，當然你也利用node.js中的express.js自己搭建一個后端服務器（后續我會講到），這邊的登錄功能以及界面我就是利用express＋uviewUI完成，

這是"我的"代碼：

這里只是簡單的做出了界面和基本功能，具體還要完善，比如登錄驗證，注冊驗證之類的，需要用到正則運算式等，

<template>
    <view class="login">
        <!--默認界面-->
        <view>
            <u-navbar :is-back="false" title="　" :border-bottom="false">
                <view class="u-flex u-row-right" style="width: 100%;">
                    <view class="camera u-flex u-row-center">
                        <u-icon name="camera-fill" color="#000000" size="48"></u-icon>
                    </view>
                </view>
            </u-navbar>
            <view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
                <view class="u-m-r-10">
                    <u-avatar :src="pic" size="140" @click=login()></u-avatar>
                </view>
                <view class="u-flex-1">
                    <view class="u-font-18 u-p-b-20" v-show="username.length==0">您還未登錄&nbsp;請先登錄</view>
                    <view class="u-font-14 u-tips-color" v-show="username.length!=0">尊貴的用戶<br />{{username}}</view>
                </view>
                <view class="u-m-l-10 u-p-10">
                    <u-icon name="scan" color="#969799" size="28"></u-icon>
                </view>
                <view class="u-m-l-10 u-p-10">
                    <u-icon name="arrow-right" color="#969799" size="28"></u-icon>
                </view>
            </view>

            <view class="u-m-t-20">
                <u-cell-group>
                    <u-cell-item icon="rmb-circle" title="支付"></u-cell-item>
                </u-cell-group>
            </view>

            <view class="u-m-t-20">
                <u-cell-group>
                    <u-cell-item icon="star" title="足跡"></u-cell-item>
                    <u-cell-item icon="coupon" title="卡券"></u-cell-item>
                    <u-cell-item icon="heart" title="關注"></u-cell-item>
                </u-cell-group>
            </view>

            <view class="u-m-t-20">
                <u-cell-group>
                    <u-cell-item icon="setting" title="設定"></u-cell-item>
                </u-cell-group>
            </view>

        </view>
        <!--彈出層-->
        <u-popup v-model="show" mode="center" width="500rpx" height="200px" border-radius=45>
            <view class="form">
                <view class="title">登錄</view>
                <view class="input">
                    <u-input v-model="userName" :type="userType" :border="border" />
                </view>
                <view class="input">
                    <u-input v-model="passWord" :type="Pwdtype" :border="border" />
                </view>
                <view class="btn">
                    <u-button type="primary" shape="square" size="mini" @click=loginBtn()>登錄</u-button>
                    <u-button type="primary" shape="square" size="mini" @click=registerUser()>注冊</u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import axios from "axios";
    export default {
        data() {
            return {
                pic: 'https://uviewui.com/common/logo.png',
                userName: '',
                passWord: "",
                userType: 'text',
                Pwdtype: 'password',
                passwordIcon: true,
                border: true,
                show: false,
                username: "",//用戶名

            }
        },
        methods: {
            registerUser() {
                uni.reLaunch({//關閉所有頁面，打開到應用內的某個頁面，
                    url: "/pages/my/register"
                })
            },
            loginBtn() {
                var _this = this;
                var username;
                axios.post('http://localhost:3000/user/login', {
                    userName: this.userName,
                    passWord: this.passWord
                }).then(function (res) {
                    uni.showToast({
                        title: '登錄成功',
                    });
                    _this.show = false
                    _this.username = res.data[0].userName
                }).catch(function (err) {
                    console.log(err)
                }
                )
            },
            login() {
                this.show = true
            }
        },
    }
</script>

<style scoped>
    page {
        background-color: #ededed;
    }

    .camera {
        width: 54px;
        height: 44px;

        &:active {
            background-color: #ededed;
        }
    }

    .user-box {
        background-color: #fff;
    }

    .form {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        padding-bottom: 10px;
    }

    .title {
        margin-bottom: 10px;
        text-align: center;
        font-size: 25px;
    }

    .input {
        padding-bottom: 10px;
    }

    .btn {
        text-align: center;
    }

    .u-size-mini {
        margin-right: 8px;
    }

    .logo {
        margin: 10px;
    }
</style>