微信小程序--》从模块小程序项目案例23.10.09

配置导航栏

导航栏是小程序的门户,用户进来第一眼看到的便是导航栏,其起着对当前小程序主题的概括。而我们 新建的小程序 时,第一步变开始配置导航栏。如下:

配置tabBar

因为配置tabBar需要借助字体图标,我这里平常喜欢使用阿里云字体图标库,所以需要先去阿里云库中找到相关图标:其官方网站:网站链接 。

随便找两个,一个作为未点击(未激活)状态,另一个作为已点击(已激活)状态:

图标就随便选了,在正式项目必须严谨了,选好图标命名如下

准备好图片资源之后就要在 app.json 文件中配置tabBar了,配置代码如下:

{"pages":["pages/home/home","pages/message/message","pages/contact/contact","pages/logs/logs","pages/logins/logins","pages/index/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#008c8c","navigationBarTitleText": "阿里工作台","navigationBarTextStyle":"white"},"tabBar": {"list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "/images/tabBar/home.png","selectedIconPath": "/images/tabBar/home-active.png"},{"pagePath": "pages/message/message","text": "消息","iconPath": "/images/tabBar/message.png","selectedIconPath": "/images/tabBar/message-active.png"},{"pagePath": "pages/contact/contact","text": "联系我们","iconPath": "/images/tabBar/contact.png","selectedIconPath": "/images/tabBar/contact-active.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

页面跳转

打开pages/cart/cart.wxml,添加跳转按钮,代码如下:

<view class="container"><button bindtap="btnTap" type="primary">跳转到登录页</button>
</view>

打开pages/cart/cart.js,添加跳转按钮,代码如下:

// 获取应用实例
const app = getApp()
Page({/*** 页面的初始数据*/data: {},// 事件处理函数
btnTap() {wx.navigateTo({url: '/pages/logins/logins',})
},/*** 生命周期函数--监听页面加载*/onLoad(options) {},

这时候界面如下:点击"跳转到第二页"按钮,页面跳转到logins

每一页都是一个webview,wx.navigateTo每打开一个页面,就是打开一个webview

需要注意的是:wx.navigateTo打开页面的栈的数量上限是10个,也就是说最多可以连续打开10个页面。

获取地理位置

这里主要要使用到wx.getLocation,用于获取当前位置信息,代码如下:

// pages/cart/cart.js//获取当前位置信息
btnTapGet() {console.log("打开");wx.getLocation({type: 'wgs84',success(res) {console.log(res);}});
},btnTapChoose() {console.log("打开");wx.chooseLocation({success(res) {console.log(res);}});
},

点击按钮,执行btnTapGet方法,首先会弹出授权

以下获取地理位置信息的API,需要在app.json做申明配置:

  "requiredPrivateInfos": ["getLocation","chooseLocation"],

(二) 工具类文件

目录中有一个“utils”文件夹,它用来存放工具栏的js 函数,如放置日期格式化函数,时间格式化函数,等一些常用的函数。定义完这些函数后, 要通过module.exports将定义的函数名称注册进来,在其他的页面才可以使用,如图所示为时间格式化工 具类文件。

在utils.js中自定义公共函数并导出

  • 自定义函数如下!务必自行配置导出 
//自定义方法
function toStr(e){return e="你好,"+e
}module.exports = {formatTime,toStr //方法名即可,多个用逗号分开
}

在index.js中引入公共文件util.js 并进行页面初始化赋值操作

import util from "../../utils/util"

在onLoad函数中进行操作

 this.setData({/*loginTime: formatTime(new Date()),motto: "您好! Jone" */loginTime: util.formatTime(new Date()),motto: util.toStr('张三')

(五) 自定义函数

.js:页面的 JavaScript 逻辑代码

除了初始化数据和生命周期函 数,Page 中还可以定义一些特殊 的函数:事件处理函数。在渲染层 可以在组件中加入事件绑定,当达 到触发事件时,就会执行 Page 中 定义的事件处理函数

Page 是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构,于是就得到了你看到的小程序的样子。

在渲染完界面之后,页面实例就会收到一个 onLoad 的回调,你可以在这个回调处理你的逻辑

// pages/logins/logins.js
Page({/*** 页面的初始数据*/data: {},onTap() {wx.showToast({title: 'Hello World',icon: 'success',duration: 2000})},clickMe: function() {  console.log('view tap')},/*** 生命周期函数--监听页面加载*/onLoad(options) {},

WXML 模板

.wxml:页面的 WXML 模板文件

<view bindtap="clickMe"> click me </view><button class="button" bindtap="onTap">Click Me</button>

组件

小程序提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼合成自己的小程序

例如,你需要在界面上显示地图,你只需要这样写即可:

使用组件的时候,还可以通过属性传递值给组件,让组件可以以不同的状态去展现,例如,我们希望地图一开始的中心的经纬度是广州,那么你需要声明地图的 longitude(中心经度) 和 latitude(中心纬度) 两个属性:

组件的内部行为也会通过事件的形式让开发者可以感知,例如用户点击了地图上的某个标记,你可以在 js 编写 markertap 函数来处理:

当然你也可以通过 style 或者 class 来控制组件的外层样式,以便适应你的界面宽度高度等等。

<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

wx.getLocation({type: 'wgs84',success: (res) => {var latitude = res.latitude // 经度var longitude = res.longitude // 纬度}
})

调用微信扫一扫能力,只需要:wx.scanCode({success: (res) => {console.log(res)}
})

(六) setData设值函数


Page.prototype.setData()设值函数:setData 函数用于将数据从逻辑层发送到视图层,同时 改变对应的 this.data 的值。
setData() 参数格式:接受一个对象,以 key、value 的形式表示将 this.data 中的 key 对应的 值改变成 value
其中, key 可以非常灵活,以数据路径的形式给出,如 array[2].message,a.b.c.d,并且不 需要在this.data 中预先定义。
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/100580.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++中的运算符重载

目录 1、运算符重载规则 2、运算符重载的两种形式 2.1、成员函数重载形式 2.2、普通的非成员函数重载形式 1、运算符重载规则 C中可以重定义或重载大部分 C 内置的运算符。这样&#xff0c;我们就能使用自定义类型的运算符。 重载的运算符是带有特殊名称的函数&#xff0c…

【数据库——MySQL】(16)游标和触发器习题及讲解

目录 1. 题目1.1 游标1.2 触发器 2. 解答2.1 游标2.2 触发器 1. 题目 1.1 游标 创建存储过程&#xff0c;利用游标依次显示某部门的所有员工的实际收入。(分别用使用 计数器 来循环和使用 标志变量 来控制循环两种方法实现) 创建存储过程&#xff0c;将某部门的员工工资按工作…

前端js调试如何复制console.log打印的对象或数组

在使用console.log()打印我们的内容时&#xff0c;时常需要将打印的内容复制粘贴使用&#xff0c;然而控制台打印出来的对象是经过格式化处理且直接选择粘贴会有格式问题&#xff0c;此时我们可以通过控制台的 copy() 方法来进行打印结果的复制&#xff0c;如图所示&#xff1a…

使用python查找指定文件夹下所有xml文件中带有指定字符的xml文件

文件夹目录如下&#xff08;需要递归删除文件夹下的.DS_Store文件&#xff09;&#xff1a; labels文件夹下面是xml文件&#xff1a; import os import os.pathpath "name/labels" files os.listdir(path) # 得到文件夹下所有文件名称 s []for xmlFile in files:…

JAVA String 和 String[][]互转的两种方法

第一种方法&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.40</version> </dependency>字符串转数组&#xff1a; String s "[[22,23,23],[1,10,20]]"…

华为云云耀云服务器L实例评测|企业项目最佳实践之云服务器介绍(一)

华为云云耀云服务器L实例评测&#xff5c;企业项目最佳实践系列&#xff1a; 华为云云耀云服务器L实例评测&#xff5c;企业项目最佳实践之云服务器介绍(一) 华为云云耀云服务器L实例评测&#xff5c;企业项目最佳实践之华为云介绍(二) 华为云云耀云服务器L实例评测&#xff5…

【轻松玩转MacOS】指引篇:这9篇指南助你轻松上手

引言 亲爱的读者&#xff0c;欢迎来到《轻松玩转MacOS》&#xff01;这里是专为MacOS新手打造的使用教学专栏&#xff0c;无论您是从Windows转投Mac的初学者&#xff0c;还是对MacOS操作略知一二但希望更进一步的朋友&#xff0c;都能在这里找到您需要的答案。 正文 1、基本…

Java8实战-总结40

Java8实战-总结40 用Optional取代null如何为缺失的值建模采用防御式检查减少 NullPointerExceptionnull 带来的种种问题其他语言中 null 的替代品 用Optional取代null 如何为缺失的值建模 假设需要处理下面这样的嵌套对象&#xff0c;这是一个拥有汽车及汽车保险的客户。 pub…

QT作业二

1、思维导图 https://www.zhixi.com/view/9e899ee0 2、作业 #include <iostream>using namespace std;class Rect {int width;int height; public:void init(int w,int h);//初始化函数void set_w(int w);//更改宽度void set_h(int h);//更改高度void show();//输出矩形…

php 外贸代购系统网站

PHP 外贸代购系统网站建设需要以下步骤&#xff1a; 链接各大热门商城上的商品并自动获取参数&#xff0c;程序集成了淘宝、拍拍等大型热门商城抓取规则&#xff0c;可以直接一键代购上面的任何商品&#xff0c;自动获取相应的参数。 确定网站功能&#xff0c;如&#xff1a;产…

你真的懂Java的继承吗?你知道什么时候用继承吗?设计继承是为了什么?

目录 1. 封装的意义是什么&#xff1f; 2. 为什么需要继承&#xff1f; 3. 继承是什么&#xff1f;如何使用&#xff1f; 4. 继承的好处是什么&#xff1f; 5. 设计继承需要注意什么&#xff1f; 6. 继承的特点 7. 子类到底继承了父类的哪些内容 7.1 继承内容 7.2 虚方…

【WSN】模拟无线传感器网络研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Java设计模式之装饰器模式

装饰器模式&#xff08;Decorator Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许你在不改变对象结构的情况下&#xff0c;动态地将新功能附加到对象上。装饰器模式通过创建一个包装对象来实现这一目的&#xff0c;该包装对象包含了原始对象&#xff0c;并在其上添…

html 笔记:CSS

1 什么是CSS CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中 1.1 css的语法格式 1.1.1 选择器种类 HTML选择器&#xff1a; 重新定义HTML的某种标签的显示格式id选择器 对于HTML文档中的某个标签&#xff0c;定义它的显示格式…

JavaScript进阶(二十三):立即执行函数(匿名函数)( ( ) { } ( ) )含义解析

文章目录 一、前言二、立即执行函数2.1 立即执行函数使用的场景 三、拓展阅读 一、前言 前端项目改造过程中&#xff0c;引入的工具类实现如下&#xff1a; var tensquared(function(x) {return x*x; }(10)); 拆解以上语句如下&#xff1a; var tensquared xx; 这是赋值语句…

HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

HTML标签&#xff1a;排版标签 排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍&#xff1a; <h1>: 定义一级标题&#xff0c;通常用于标题栏或页面主要内容的标题。<p>: 定义段落&#xff0c;用于将文字分段展示&#xff0c;段落之…

Jmeter 链接MySQL测试

1.环境部署 1.1官网下载MySQL Connector https://dev.mysql.com/downloads/connector/j/ 1.2 解压后&#xff0c;将jar放到jmeter/lib目录下 1.3 在测试计划中添加引用 2.脚本设置 2.1设置JDBC Connection Configuration 先添加一个setUp线程中&#xff0c;在setUp中添加“…

2023年台州市第三届网络安全技能大赛(MISC)—Black Mamba

前言&#xff1a;当时比赛没有做出来现在来复现一下 就当记录一下&#xff08;这个思路没想到&#xff09; Black Mamba&#xff1a; 一张图片 常规得分离&#xff0c;属性&#xff0c;LSB&#xff0c;盲水印等都尝试过 无果&#xff01; 考点&#xff1a;异或解密&#xff0…

计算机算法分析与设计(8)---图像压缩动态规划算法(含C++代码)

文章目录 一、知识概述1.1 问题描述1.2 算法思想1.3 算法设计1.4 例题分析 二、代码 一、知识概述 1.1 问题描述 1. 一幅图像的由很多个像素点构成&#xff0c;像素点越多分辨率越高&#xff0c;像素的灰度值范围为0~255&#xff0c;也就是需要8bit来存储一个像素的灰度值信息…

C# 为什么要限制静态方法的使用

前言 在工作了一年多之后&#xff0c;我发现静态方法的耦合问题实在是头疼。如果可以尽量不要使用静态方法存储数据&#xff0c;如果要存储全局数据就把数据放在最顶层的主函数里面。 静态方法问题 耦合问题&#xff0c;不要用静态方法存储数据 我这里有两个静态方法&#…