成都网站建设设计

将想法与焦点和您一起共享

微信小程序如何制作欢迎页面-创新互联

这篇文章主要为大家展示了“微信小程序如何制作欢迎页面”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序如何制作欢迎页面”这篇文章吧。

创新互联是一家专业提供庐江企业网站建设,专注与网站设计制作、成都网站建设、H5响应式网站、小程序制作等业务。10年已为庐江众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

微信小程序欢迎页面:

先看下最后的效果图: 

微信小程序如何制作欢迎页面

首先打开开发工具,创建quick start项目,简单的修改一下。 

微信小程序如何制作欢迎页面

  • 把Index文件夹重命名为welcome;

  • 底部的hello world改为一个类似于按钮的样式;

  • 添加背景颜色; 修改顶部样式;

按钮的实现:

welcome.wxml

 
 开启小程序之旅
 

welcome.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"
 }
}

以上是“微信小程序如何制作欢迎页面”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页标题:微信小程序如何制作欢迎页面-创新互联
网页地址:http://chengdu.cdxwcx.cn/article/doihhd.html