微信小程序欢迎界面的制作

【微信小程序】welcome页面 app.js、app.json和app.wxss。一个小程序项目必须有这3个描述App的文件,它们必须放在应用程序的根目录下,否则小程序会提示找不到app.json文件。 阅读详情
  • 新建一个页面,包含.js,.json,.wxml,.wxss文件
    页面.wxml文件
<view class="usermotto">
<text class="btn">开启小程序之旅</text>
</view>

页面.wxss文件

.usermotto {
 margin-top: 200px;
 border: 1px solid #405f80;
 width: 200rpx;
 height: 80rpx;
 text-align: center;
 border-radius: 5px;
}
.btn{
 font-size: 22rpx;
 font-family: MicroSoft Yahei;
 font-weight: bold;
 line-height: 80rpx;
}

注意:在最外部的view设置宽高百分百,添加背景颜色是无效的。因为微信默认外面还有一层page。
所以需要这样写:

page{
 height: 100%;
 background: #b3d4db;
}

顶部设置:

app.jason

{
 "pages":[
 "pages/welcome/welcome"

 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#b3d4db",
 "navigationBarTitleText": "欢迎",
 "navigationBarTextStyle":"black"
 }
}
微信小程序的欢迎界面 1.布局的实现 整个布局使用swiper滑动视图实现,滑动视图的每一个item通过一个block块包裹,块中包裹的是滑动视图的每一个item, item中包含image图片和button按钮 2.逻辑的实现 在data中准备了一个imgs数组,数组中存放了3个图片的地址,这里还有一个start函数,该函数用来监听界面上button的点击事件。 wx.navigateTo这个api的作用就是实现界面的跳转并有返回的按钮,url是用来指定跳转的界面 3.样式的实现 swiper样式是定义滑动控件的样式:滑动控件的位置为绝对布局,宽和高为占满整个屏幕 .swiper-image样式是定义image图片的样式:宽和高为占满整个屏幕,透明度为0.9 .button-img样式是定义button按钮的样式:位置为绝对布局,离底部90px,透明度为0.6,.. 立即下载

相关推荐

微信小程序 首页制作简单实例

主要介绍了微信小程序 首页制作简单实例的相关资料,需要的朋友可以参考下

【微信小程序-原生开发】实用教程04-启动/欢迎/首屏广告页(含倒计时、添加文字、rpx、定义变量和函数、读取变量、修改变量、wx.reLaunch 页面跳转、生命周期 onReady等)

含倒计时、添加文字、rpx、定义变量和函数、读取变量、修改变量、wx.reLaunch 页面跳转、生命周期 onReady等实用知识点

朝阳39的博客 2086

保姆级教程:用GD32F470的EXMC Bank0 Region0与FPGA实现16位并行通信(附完整代码)

本文详细介绍了如何利用GD32F470的EXMC Bank0 Region0与FPGA实现16位并行通信,涵盖硬件连接、寄存器配置、时序优化及FPGA接口设计等关键步骤。通过实例代码和调试技巧,帮助开发者快速掌握高效数据交互技术,提升嵌入式系统设计能力。

weixin_26918763的博客 226

微信小程序(路由)几种页面的跳转方式

wx.switchTab(Object object) 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 wx.reLaunch(Object object) 关闭所有页面,打开到应用内的某个页面 wx.redirectTo(Object object) 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 wx.navigateTo(Object obje...

望天吼 1955

QGIS:安装Deepness插件+应用

简单的描述了deepness的安装应用历程,重点是记录博主本次遇到的坑

fengyi157的博客 2338

【阿里云大模型高级工程师ACP学习笔记】2.8 部署模型

【摘要】本文主要分享自学阿里云大模型高级工程师 ACP 认证中《2.8 部署模型》的学习笔记。详细介绍学习目标、梳理涵盖的知识点并评估其重要性和难易度,对既重要又困难的知识点进行重点分析,旨在为对阿里云大模型学习和认证感兴趣的读者提供学习思路和经验参考。

davidkorhenn的博客 2060

微信小程序首页、界面布局、功能简洁(示例三)

界面中包含的图片地址可自行修改。页面布局简洁,功能简单,没有写具体的监听事件,只是简单的将监听进行了绑定,如需要具体的监听功能事件,需要根据自己的需求进行修改呦,如需更多示例,进我主页呦~,如需没有合适的demo,请留言,有空就发。写的不好,请多包涵。

蒜鸟编程的博客 1万+

汽车以太网- IEEE 802.3标准

关于汽车以太网,大家看到最多的标准大概就是IEEE802.3bw,也就是我们车内使用的百兆以太网,专业称呼是100BASE-T1,该标准是车内百兆以太网的物理层协议,是我们学习汽车以太网必须要了解的协议。在正式了解协议之前,我们先介绍下什么是IEEE802.3标准。............

weixin_39974126的博客 7114

母亲节快乐 设计 微信小程序

设计一个微信小程序来庆祝母亲节,您可以考虑创建一个简单而温馨的应用程序,让用户能够轻松地发送祝福、分享照片或视频,甚至可以是一些互动小游戏等。- **导航栏**:包括“首页”、“制作贺卡”、“发送祝福”、“关于我们”。- **欢迎页**:可以是一个充满爱的动画或者图片,表达对所有母亲的敬意。5. **发布上线**:通过微信公众平台提交审核,审核通过后即可发布。4. **测试优化**:完成初步开发后进行全面测试,修复发现的问题。1. **规划与设计**:确定需求,画出原型图。

weixin_66625287的博客 582

深入解析时钟同步技术:相位同步、频率同步与同源时钟的实战应用

本文深入解析时钟同步技术的三种核心方式:相位同步、频率同步与同源时钟,详细阐述其技术原理、实现方案及实战应用。通过对比分析不同同步方式的特点与适用场景,为电子系统设计提供选型指南,帮助工程师优化时钟网络设计,提升系统稳定性和性能。

weixin_29240711的博客 451

Openlayers 教程 02 - 地图添加 WKT WKB GeoJson 格式的点线面数据

WebGIS 开发中,对于数据量不是很大的场景,可以直接从数据库读取数据,通过创建点线面要素(Feature),然后添加到矢量图层(vectorLayer)中,在地图上展示。添加点线面的方法可以封装一下,方便使用。...

非科班Java出身GISer的博客 3859

微信小程序-欢迎界面

市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面。下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现整个布局使用swiper滑动视图实现,滑动视图的每一个item通过一个block块包裹,块中包裹的是滑动视图的每一个item, item中包含image图片和button按钮 <swiper indicator-dots="tr

liujun2son 6331

图像标注神器:完全开源免费的多功能标注工具Labelme详解

Labelme是MIT开发的免费开源图像标注工具,支持多边形、矩形等多种标注类型,适用于目标检测、分割等计算机视觉任务。提供Windows可执行文件和Python安装两种方式,可输出JSON格式并转换为COCO等标准数据集。具有跨平台、功能全面、社区活跃等优势,能显著提升标注效率,是AI视觉项目的重要数据准备工具。

数字人生 529

微信小程序入门-简单页面编写

前言今天微信小程序正式上线,抱着学习新技术的心态开始第一次接触微信小程序,无论外面怎么鼓吹把微信小程序怎么干掉大量的原生的app,然而作为一个学习者保持一个正确的学习心态,它只是一门新的事物,也许这个事物是用Web前端技术包裹而成,这不妨碍对新鲜事物的追求。应用范围张小龙对小程序的定义: 小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。

zanzan的博客 6万+

机器人中的数值优化(十四)——罚函数法(Penalty Method)、障碍函数法(Barrier Method)、拉格朗日松弛法(Lagrangian Relaxation)

本系列文章主要是我在学习《数值优化》过程中的一些笔记和相关思考,主要的学习资料是深蓝学院的课程《机器人中的数值优化》和高立编著的《数值最优化方法》等,本系列文章篇数较多,不定期更新,上半部分介绍无约束优化,下半部分介绍带约束的优化,中间会穿插一些路径规划方面的应用实例

慕羽★的博客 5221

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

微信小程序开发--欢迎界面

前言 最近在学B/S相关的东西,js资料看的头疼了,做了几个小项目也是稀里糊涂的,没有过明白js中的精华.索性就先放下休息一下,看看微信小程序的制作,找了一套视频,跟着视频中老师讲的来模仿着做了一个界面. 正文 开发环境 微信官方推出了小程序的IDE开发环境,大家可以去网站上下载,这个安装就很简单了,默认安装就可以了 这个是登录后的界面,选择小程序项目进入IDE开发环境. 界面大概就是长这个样子...

朗福德的博客 4833

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

微信小程序 欢迎界面开发的实例详解

市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面。 下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现 整个布局使用swiper滑动视图实现,滑动视图的每一个item通过一个block块包裹,块中包裹的是滑动视图的每一个item, item中包含image图片和button按钮 wxml如下: <swiper indicator-dots="true"> <blo

怎奈你何的博客 1715

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

php欢迎界面代码,分享微信小程序欢迎界面开发的实例代码

这篇文章主要分享微信小程序欢迎界面开发的实例代码的相关资料,这里实现欢迎界面的简单实例和实现代码及实现效果图,需要的朋友可以参考下微信小程序 欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面。下面将会按照以下的顺序介绍:布局的实现逻辑的实现样式的实现1.布局的实现整个布局使用swiper滑动视图实现,滑动视图的每一个item通过一个block块包裹,块中...

weixin_42320036的博客 313

欢迎页php,关于微信小程序中欢迎页面的制作

这篇文章主要介绍了微信小程序 欢迎页面的制作含(源码下载)的相关资料,这里实现欢迎页面,开始做应用的时候都会用到,需要的朋友可以参考下微信小程序欢迎页面:先看下最后的效果图:首先打开开发工具,创建quick start项目,简单的修改一下。把Index文件夹重命名为welcome;底部的hello world改为一个类似于按钮的样式;添加背景颜色; 修改顶部样式;按钮的实现:welcome.wxm...

weixin_31081671的博客 559

微信小程序开发登录界面mysql_微信小程序 欢迎界面开发的实例详解

微信小程序 欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面。下面将会按照以下的顺序介绍:布局的实现逻辑的实现样式的实现1.布局的实现整个布局使用swiper滑动视图实现,滑动视图的每一个item通过一个block块包裹,块中包裹的是滑动视图的每一个item, item中包含image图片和button按钮立即体验2.逻辑的实现在data中准备了一个im...

weixin_36004880的博客 347

微信小程序登录注册界面

小程序登录注册界面demo

蒜鸟编程的博客 2万+

微信小程序制作课程表_自己怎么制作微信小程序

随着小程序功能的不断完善,小程序无疑是近几年中国互联网从业者及商家中最关心的话题,不仅能提升用户对商家的体验度,同时又能很好的引入微信庞大的用户群体作为流量来源,实现新一轮的流量红利。小程序这么受欢迎,于是不少企业和个人也产生了做一个属于自己的小程序的想法,但又苦于不知道微信小程序制作流程及费用,无从下手。所以,今天说一下怎么制作微信小程序一、注册小程序账号第一步要到“微信公众平台”注册一个小程序...

weixin_34194482的博客 3658

学习微信小程序制作第五天(智慧社区项目实战)

1正常前端写的js,只能运行在浏览器中-浏览器中有js的解释器环境2 作为前端来讲,只能写前端,写不了后端-需要学后端语言:python,go,java,c,php。。。3 有大神,把chrome浏览器中的v8,使用c重写了,让它能够安装在操作系统之上-我们就可以使用js的语法,写后端了4 前端人员,不需要再学新语法了,直接用js语法,既能写前端,又能写后端5 好多第三方模块,包的构建是使用node构建的, 比如vue。

weixin_45738971的博客 1790

【微信小程序开发(从零到一)【婚礼邀请函】制作】——邀请函界面的制作(2)

👨‍💻。

php优质创造者 5030

微信小程序 16 登录界面

在 2022 年之前,如果 我们想在小程序里,做到 双向数据绑定。并且 用一个事件绑定多个元素的话。可能会用到 事件委托 和 事件函数里 event 对象传过来的值。所以我们也趁此机会 了解一下 事件委托是什么。事件委托也叫事件代理,“事件代理”即是把原本需要绑定在子元素的响应事件(click、keydown…)委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。:即一个元素的事件触发后,会依次一级一级往上调用父级元素的同名事件,直到 window(浏览器窗口)。这个其实也很好理

小哞^同^学的技术博客 5729
上一篇: 微信小程序图片的加载
下一篇: 微信小程序的上传
zero_1996
博客等级 码龄10年 13粉丝 27原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值