微信小程序-显示图片并添加按钮加跳转

原创 麻木  2019-05-22 23:52:04  阅读 445 次 评论 2 条

麻木博客
麻木博客
摘要:

显示图片并添加按钮加跳转

准备工作

首先,你必须注册了微信小程序账户和安装了微信开发者工具,如果没有,请参考麻木博客官网:微信小程序初章-注册微信小程序账户及安装微信小程序开发者工具篇


显示图片并添加按钮加跳转 

效果:去掉微信登陆增加按钮,点击按钮跳转到另一界面,显示轮播图,并支持跳回主页

微信小程序-显示图片并添加按钮加跳转 显示图片并添加按钮加跳转 第1张


步骤开始:

1:步骤开始:删除pages/index/index.wxml中的所有代码,等待写入新代码。

微信小程序-显示图片并添加按钮加跳转 显示图片并添加按钮加跳转 第2张


2:先实现图片的显示

点击右上角的详情查看项目文件存放目录,点击打开

微信小程序-显示图片并添加按钮加跳转 显示图片并添加按钮加跳转 第4张微信小程序-显示图片并添加按钮加跳转 显示图片并添加按钮加跳转 第5张


4:返回微信开发者平台会发现pages目录下多了一个images文件夹,点击其中的图片也可以预览,就是刚才添加的图片和GIF文件

微信小程序-显示图片并添加按钮加跳转 显示图片并添加按钮加跳转 第6张


5:既然图片的问题解决了,就到了引用部分,开始打代码了。。。

在pages/index/index.wxml文件中编辑代码,将原来代码删了,输入以下代码:运用到了 images图片属性以及 view视图容器属性代码

<view class="index-container">
<image class="logo"src="/pages/images/4.gif"></image>     /*images后的图片文件名称根据实际命名填写,请勿和我相同*/
</view>

微信开发者工具是支持自动补齐代码的,在输入代码关键字会跳出相关代码,点击回车会自动补齐代码噢!

微信小程序-显示图片并添加按钮加跳转 显示图片并添加按钮加跳转 第8张

7:接下来继续在view中加入view视图属性代码并添加按钮的代码

运用到 bindtap事件属性

<view class="primay" bindtap="goNews1Tap">             /*view命名为primay,运用到 bindtap事件属性并将其命名为goNews1Tap*/
<text class="primay-text">点我</text>       /*命名文本文件为primay-text并添加文本内容:点我*/
</view>


8:发现显示了刚才设置的文字:点我,但是不好看,需要优化显示效果

微信小程序-显示图片并添加按钮加跳转 显示图片并添加按钮加跳转 第9张


9:目的效果

微信小程序-显示图片并添加按钮加跳转 显示图片并添加按钮加跳转 第10张



代码部分

需要修改pages/index/index.wxss文件,删除原来文件的自带代码加入一些新代码,使按钮的文字外观达到一定的美化效果!

需注意primay是自行设置的名称,自行操作时请根据实际名称进行设置

.index-container{
display: flex;
flex-direction: column;/*垂直布防*/
align-items: center; /*位置居中*/
color: black ;
}

.logo {
width: 620rpx;
height: 436rpx;
margin-top: 1rpx;
}
.primay {                         /*****按钮布局********/
margin-top: 100rpx;             /*按钮 在界面的位置,值越大越下方*/
border: 5px  solid #00BFFF;   /*按钮边框 粗细及颜****/
border-radius: 10px;            /*按钮边框 弧度形状调整*/
padding: 10px 10px;             /*按钮边框 与 内部字体间距调整*/
}

.primay-text{
font-size: 50rpx;               /*按钮 内字体大小*/
color: black;               /*按钮 内字体颜****/
}


将上方代码加入pages/index/index.wxss文件其中点击编译即可改变按钮外观

效果达到了



微信小程序-显示图片并添加按钮加跳转 显示图片并添加按钮加跳转 第10张


设置按钮的点击跳转代码部分

目的:点击 点我 按钮跳转到别的界面

代码部分:

前往utils/app.json文件,在pages属性中添加一段代码

"pages/h2/h2",   //h2并非固定名称可以自行自定义,如aa,bb。。。,记得在末尾加入逗号,微信小程序代码规则只有最后一行不用加逗号!


添加完成后点击编译,会发现pages目录下多了一个h2文件夹,h2文件夹下也有相应文件

微信小程序-显示图片并添加按钮加跳转 显示图片并添加按钮加跳转 第12张

微信小程序-显示图片并添加按钮加跳转 显示图片并添加按钮加跳转 第13张


目的:点击 点我按钮跳转到h2界面

代码部分:

1:在pages/index/index.js文件中加入以下代码

Page({
goNews1Tap: function (event) {       /*跳转到h2页面 关键代码*/
wx.navigateTo({
url: '../h2/h2',                          /*指定跳转到h2界面*/
})
}
})


2:点击编译后点击  点我按钮  跳转到h2界面

微信小程序-显示图片并添加按钮加跳转 显示图片并添加按钮加跳转 第14张


3:只显示了目录文字。这是正常的。默认文字就是显示当前文件的所在目录路径

会改主页,这个当然就不难了,就可以复制主页index.wxml的代码到h2的wxml实现相同功能,

当然wxss代码也是要复制过去,美化显示效果!

效果如下:

微信小程序-显示图片并添加按钮加跳转 显示图片并添加按钮加跳转 第15张


4:如果想要实现返回主页功能,h2的h2.js也是要添加按钮指向目录的

代码如下

Page({
goNews1Tap: function (event) {       /*跳转到主界面页面 关键代码*/
wx.navigateTo({
url: '../index/index',                          /*指定跳转到index主界面界面*/
})
}
})


5:为了做出比较。我更改了图片,可以查看明显的效果

微信小程序-显示图片并添加按钮加跳转 显示图片并添加按钮加跳转 第16张

就是这么的简单,不知道看了的朋友学会了吗,如有不懂得可以给我留言询问噢!


最后附上原源码:

此处内容需要评论后才能查看。
点击去评论


编辑:麻木

打赏 支付宝打赏 微信打赏
本文地址:https://www.mamublog.cn/post/18.html
版权声明:本文为原创文章,版权归 麻木 所有,欢迎分享本文,转载请保留出处!

站点广告专区

麻木博客

发表评论


表情

评论列表

  1. 麻木
    麻木  @回复

    原源码地址:https://www.lanzous.com/i49k5mf

  2. 麻木
    麻木  @回复

    原源码请关注麻木博客微信公众号获取