打开 main.js,这个文件里定义的是整体小程序中会用到的一些 功能 （即变量之类），也就是说，只要在这里出现的功能，其它页面可以直接拿来使用。可以把它理解为： 共享单车main ，大家都可以用。

我们在它的最下面加一排内容：

import App from './App'// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({...App
})
app.$mount()
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)return {app}
}
// #endif//以下是添加内容var APITOKEN = 'myuniapp';  //口令
Vue.prototype.apiServer = 'http://127.0.0.1/api.php?token=' + APITOKEN + '&action='; //数据接口地址Vue.prototype.checkLogin = function(backpage) { //检测是否登陆var UID = uni.getStorageSync('UID'); //用户IDif (UID == '') {console.log("没登陆")uni.redirectTo({url: '/pages/login/login?backpage=' + backpage });return false;} else {console.log("已登陆")return UID;}
}

上面的  apitoken 是我们设置的与数据接口对接的一个口令，就像我们说：“芝麻开门” ，服务器那里一看，对啊，就放我们进去一样，属于一个安全认证的环节。

Vue.prototype.apiServer  这句话，是表示 添加全局变量，名字叫 apiServer ，就是加了一辆名称叫 “apiServer“的共享单车。

Vue.prototype.checkLogin 这句话，与前面的 apiServer 不一样，它是一个 略为复杂的功能性代码，是用来判断用户是否登陆， 如果没有登陆，就跳转到登陆界面去。如果登陆了，就告诉其它页面，用户的UID编号是多少，这个UID存在于 服务器数据库中，就类似我们的身份证，是一个数字。这里，我们又添加了一辆名称叫 “checkLogin“的共享单车。

每个页面修改后记得保存一下。

下面我们看看每个页面的结构与如何把这两个“共享单车”拿来使用。

点开index.vue文件，会发现，所有页面由三大块构成

红色区是一个页面的显示代码，相当于房子的结构

绿色区是功能代码，来设置这个页面实现哪些功能，这里就一些“方法”，“事件”的定义，后面我们遇到再慢慢细说

蓝色区是样式代码，说白了就是 用来 装修 房子显示效果的。

<template>
    <view>
        我是写日记界面
    </view>
</template>

<script>
    export default {
        data() {
            return {   }
        },
        methods: {            
        }
    }
</script>

<style>

</style>

我先把前面的“共享单车”拿来看看效果，修改<script>成以如下

<script>
var _self,loginUID;    //定义两个变量，页面都要用到
    export default {
        data() {
            return {            
            }
        },
        methods: {
        } ,
        onLoad() {
            _self = this; 
            loginUID = _self.checkLogin('/index/index');
            if (!loginUID) {return;    }else(console.log(loginUID));
        }
    }
</script>

保存后，点击 菜单上面的 “运行---》运行到内置浏览器中”，这样我们就在软件右边看到执行后的效果了，会发现，页面跳到了“登陆界面”

将以上代码，分别替换到 edit.vue,list.vue两个页面中。

现在，我们无论点击哪个页面，都会跳到  “登陆界面” login.vue这个页面，所以，我们先制作一下“登陆界面”。

将login.vue页面按以下代码修改，可直接将下面代码拷贝过去：

<template><view class="body"><!-- 显示区正式开始 --><view class="myfrom"><form @submit="goLink"><view class="myfrom"><view class="myinput"><input v-model="pwd" placeholder="请输入密码" password adjust-position /></view><view class="mybutton"><button type="primary" form-type="submit">登陆</button></view></view></form></view><!-- 显示区结束 --></view>
</template><script>var _self;export default {data() {return {pwd: ''};},methods: {goLink() {if (_self.pwd == '') {uni.showToast({title: "密码必填",icon: "none"});return;}uni.request({url: _self.apiServer + 'login',method: 'POST',header: {'content-type': "application/x-www-form-urlencoded"},data: {'pwd': _self.pwd},success: res => {console.log(res);var result = res.data.result;if (result == "ok") {var uid = res.data.datas.uid;var uname = res.data.datas.uname;uni.showToast({title: uname + "登录成功",icon: "none"});uni.setStorageSync('UID', uid + ''); //字符串形式存储                                              setTimeout(function() {uni.switchTab({url: "/pages/index/index"}); // 跳转目标}, 2000); //2s后跳转} else {_self.pwd = '';uni.showToast({title: result,icon: "none"});}}});} //golink结束},onLoad() {_self = this}}
</script><style>.myfrom {margin: 30% 10px 40px 10px;}.myinput {border: 1px solid #ccc;border-radius: 5px;height: 30px;padding: 5px;text-align: center;}.mybutton {margin-top: 20px;}
</style>

这个文件中，丰富了 显示区，这里要说明的是，显示区以一对 <template> 开始，里面的第一个标签只能是 一对 <view>

<template>
    <view class="body">
        <!-- 显示区正式开始 -->
           <view class="myfrom">
                <form @submit="goLink">        
                <view class="myinput">
                    <input v-model="pwd" placeholder="请输入密码" password adjust-position />
                </view>
                <view class="mybutton">
                    <button type="primary" form-type="submit">登陆</button>
                </view>  
                </form>
            </view>
      
        <!-- 显示区结束 -->
    </view>
</template>

我们要提交出去的内容，全部放到一个       <form> </form>的包装（组件）中，在这段代码中，还有一个  <button>按钮，上面写  form-type="submit"  就表示点它，就执行写在form上的 @submit="goLink" 方法，去处理数据，这两个 submit是绑定关系，一条绳上的蚂蚱。
goLink是我们自己起名一个处理提交事件的方法名，在我们这个应用中，全部用这个名字，表示与服务器时行数据的沟通。

在 input 用户输入框里有一个重要知识点：v-model=”pwd“      ，这个表示这个是可以变化的值，它会实时把输入的内容 传递给 功能区<script> 里对应叫做”pwd“的变量 ，在功能区中就是_self.pwd ，  v-model 理解成一个镜子功能就行，你做什么，镜子里的你也做什么

password表示 这是密码输入， adjust-position表示手机上的键盘不要挡住输入框

接下来，我们看一下功能区<script>的主要知识点

首先，我们自己命名的所有方法，基本上都要放到 methods这个{ }大括号之内，并且，每个名字之间要用 ，逗号隔开，最后一个不能带 ， 逗号。

以goLink()来讲， 这里的 uni.request 表示 要与数据服务器进行深入交流一下，可以理解为发快递，POST是一种比较安全的传递方法，就好比咱们的快递商品加了一个包装盒，一般人看到里面的商品，记着一定要加上header: {'content-type': "application/x-www-form-urlencoded"} 组合到一起用就行了。还有GET方式，这种就相当于邮寄商品没加包装盒，外人一眼能看到你寄的是啥。

console.log 是一个监控指令，初学的同学，可以在开发工具的下面直接看到调试内容，实际成品中是看不到的。

uni.showToast是一个可以让用户看到的提示，与console.log 有类似功能，区别就是这个特意要在成品中显示出来的

uni.setStorageSync 表示我们收到货后，先存放起来，其它页面还要用到。这个应用中，我的收到是从服务器返回来的 用户身份UID。

uni.switchTab 是指的完成功能操作后，进行跳转，系统有多种跳转方式，但由于我们的页面是 tabbar这个卡式切换，所以，只有选这个，下一节还会用到。

以上代码可以先运行起来，可以日后再了解更详细的知识点，入门后，网上有更多专业的教程。

好了，这节课我们学习了页面的基本构成结构，并完成了 登陆界面的制作。

【大白话学习】UniApp 微信小程序与APP应用 开发零基础入门教程(二）---登陆界面功能实现相关推荐

  1. 【大白话学习】UniApp 微信小程序与APP应用 开发零基础入门教程(一）---基础页面框架搭建

    写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...

  2. 【大白话学习】UniApp 微信小程序与APP应用 开发零基础入门教程(七）---登陆注销功能与微信小程序测试号的申请

    到此为止,我们只差一个退出登陆功能了. 回到index.vue页面,之前我们已经预留了退出按钮,现在给它加上功能 <button class="mybutton" type= ...

  3. uni-app 微信小程序 模仿 app二层楼功能

    uni-app 微信小程序 模仿 app二层楼功能 先占个坑,今天应该写不完, 后续在慢慢补全 更新 终于写完了 这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...

  4. uniapp - 微信小程序端引入 Echarts 图表及使用详细教程，简单快速的解决方案（拒绝复杂的过程，附带详细的使用示例保姆级教程）

    效果图 现在各种平台的文章都太乱了,基本上实测无效... 帮你在uniapp开发中,微信小程序平台端使用 echats 图表的详细教程,快速并且简单轻松搞定. 下面是最后的运行结果,随便用的一个图表进 ...

  5. 微信小程序蓝牙模块BLE开发说明基础知识

    微信小程序蓝牙模块说明 一.简介 微信小程序作为轻量级应用的载体,确实方便了很多的应用场景.传统的产品如果要和手机互联互通,那么必须要开发两套APP,即IOS和安卓.十分的麻烦和成本巨高.但是微信小程 ...

  6. 【uni-app微信小程序】搜索页面开发，可以保存用户搜索历史，删除历史（简单解释）

    目录 前言 效果展示 主体内容 前言 此篇文章纯代码较多,细节解释,今后会出更加详细的解释 效果展示 保存的内容,可以长按删除,视频时长原因就不一一展示,具体效果如下视频 主体内容 这里one-adv ...

  7. 基于uniapp+vue+微信小程序+安卓app电影院订票小程序H5网站设计

    开发技术:uniapp + vue + ElementUI + 微信小程序 + 安卓app + Springboot 开发工具环境:HBuilder + 微信开发者工具 + VsCode + Idea ...

  8. uniapp 微信小程序登录方法封装

    uniapp 微信小程序登录方法封装 前言 一.登录接口 二.登录 上代码 总结 前言 ui设计没有登录页所以将微信小程序登录方法同一封装一个方法 一.登录接口 uni.getUserProfile ...

  9. uniapp - [微信小程序] 超详细实时录音功能，录制外部声音及播放上传到服务器（支持录音完毕生成 mp3、试听音频(带进度条)、暂停录音、重新录音、限制录音最大时长、自定义音频名称等功能）

    前言 网上的教程都太乱了,功能不好用且一堆 BUG,没有注释很难改造示例为自己用. 本文实现了 uniapp 微信小程序平台,授权麦克风进行录音并保存为音频的功能,内置播放器可播放录音文件, 您直接复 ...

最新文章

  1. 用C语言做的 一个整人的小程序
  2. FireWork 制作android 应用程序 icon
  3. 在代码段中安排自己定义的数据
  4. 02_c3p0之c3p0-config.xml配置案例，操作c3p0的jdbcUtil工具类的编写
  5. curl和wget的区别和使用
  6. LVS+Keepalived实现负载均衡和双机热备
  7. 漏桶算法与令牌桶算法
  8. 【GIS导论】实验五 缓冲区分析和网络分析
  9. 计算机网页的设计与应用的前言,网页设计前言.ppt
  10. 光伏发电量和用电量的概率预测研究综述（1）
  11. Exception raised: Traceback (most recent call last):
  12. CSS浮动-5.1浮动比较重要-使用folat属性来设置元素的浮动-left-right-none
  13. 2022年最新个人免签易支付源码网站对接支付教程
  14. Android AOSP 源码 编译 android5.1.1，并刷入手机
  15. 基于matlab活体检测,人脸识别中活体检测算法综述.PDF
  16. 方德系统装exe文件_国产处理器+自主OS完美运行exe程序？英特尔认为有侵权嫌疑...
  17. 个人表现怎么写学生_小学生家长寄语大全 家长寄语怎么写
  18. Golang语言全栈开发视频教程全集
  19. 攻防世界逆向高手题之Guess-the-Number
  20. Java基础学习——第十章 枚举类注解

热门文章

  1. 【arc075F】Mirrored
  2. 三、向SpringCloud注册Service服务（Restful服务）
  3. 【大数据面试题】（五）Spark 相关面试题总结
  4. cannot import name ‘six报错
  5. 针对儿子买的将近一万的笔记本电脑
  6. 麻雀爱上凤凰在线播放，麻雀爱上凤凰详细剧情
  7. 语音识别-关键词检测
  8. 永恒之蓝ms17_010漏洞
  9. 键盘输入,大写字母变小写,小写变大写
  10. 【KiCad镜像】下载与安装