微信小程序(一)

一: 设置微信小程序底部导航栏

我们找到项目根目录中的配置文件 app.json 加入如下配置信息

"tabBar": {
   "color": "#a9b7b7",
   "selectedColor": "#11cd6e",
   "borderStyle":"white",
   "list": [{
     "selectedIconPath": "images/111.png",
     "iconPath": "images/11.png",
     "pagePath": "pages/index/index",
     "text": "首页"
   }, {
     "selectedIconPath": "images/221.png",
     "iconPath": "images/22.png",
     "pagePath": "pages/logs/logs",
     "text": "日志"
   }, {
     "selectedIconPath": "images/331.png",
     "iconPath": "images/33.png",
     "pagePath": "pages/test/test",
     "text": "用户"
   }]
 },  

tabBar  指底部的 导航配置属性

color  未选择时 底部导航文字的颜色

selectedColor  选择时 底部导航文字的颜色

borderStyle  底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条)

list   导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text  导航图标下方文字

原文取自  CSDN上的一位好友, 忘记叫什么了, 抱歉

原文地址:https://www.cnblogs.com/LoveAndPeace/p/8310047.html

时间: 2024-11-06 16:16:15

微信小程序(一)的相关文章

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇

微信小程序——豆瓣电影——(2):小程序运行部署

Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正

微信小程序开发初探

一.关于微信小程序 1.1 小程序诞生的背景 张小龙说道: (1)一切以用户价值为依归→用户是微信的核心,所以微信中没有很多与客户无关的功能,比如QQ中的乱七八糟一系列东西. (2)让创造发挥价值→所有围绕微信的创造比如公众号都应该发挥其应有的价值. (3)用完即走的高效服务→这一点就厉害了word天,微信要打造一个以微信为中心的生态链,不以绑定用户为目标.比如生活中有一些不太常用的app,我们可能一年也使用不了几次,但是有时候就需要用到,微信就想要提供这样一个平台,让你可以在微信中使用这中所谓

微信小程序之使用本地接口开发

本文主要讲解如何使用本地接口进行开发,很多人都会遇到这个问题,特别是小程序上线后. 一.解决思路 在小程序开发工具设置网络代理,然后再通过Charles设置代理,将https域名转为本地接口进行访问. 以下示例的环境为win7 + 老版本的微信开发工具 二.准备工作 1.配置https域名 为小程序配置request合法域名,在登录公众号平台去设置. 2.安装Charles 下载地址:https://www.charlesproxy.com/download/ 三.配置Charles 1.安装根

带你入门微信小程序

认识微信小程序 2016年1月9日,TX启动小程序研发,于2017年1月9日正式发布.不同于微信订阅号或公众号,微信小程序被赋予了应用程序的能力,他是一种无需安装即可使用的应用,它实现了应用“触手可及”的梦想,用户“扫一扫”或者“搜一搜”即可打开应用:体现了“用完就走”的理念,用户不再需要关心是否安装太多应用问题.应用将无处不在,随时随地可用,无需卸载. 微信小程序相关技术 微信小程序自定义了一套语言,称为WXML微信标记语言,它的使用方法类似于HTML语言.另外,微信小程序还定义了自己的样式语

WordPress版微信小程序2.2.0版发布

2017年8月12日WordPress版微信小程序2.2.0版通过了微信的审核正式发布,此版本的更新以完善功能为主.主要更新的功能是:站内链接,猜你喜欢,热点文章. WordPress版微信小程序开放源码地址:https://github.com/iamxjb/winxin-app-watch-life.net 了解程序的开发历程及开发技术,建议看看相关版本的更新文章: 1.用微信小程序连接WordPress网站 2.WordPress版微信小程序1.5版本发布 3.WordPress版微信小程

微信小程序(5)--阅读器

最近用微信小程序写了一个图书阅读器,可以实现左右滑动翻页,按钮翻页,上下滚动,切换背景,控制字体大小.以及记住设置好的状态,如页面再次进来保留上次的背景色和字体大小. 由于暂时没有真实的数据接口,所以我用了静态数据. <!-- 文本 --> <view class="container" style="background:{{bodyColor}}"> <!-- 中间层,点击,头部底部显示 --> <view class=

微信小程序(4)--二维码窗口

微信小程序二维码窗口: <view class="btn" bindtap="powerDrawer" data-statu="open">button</view> <!--mask--> <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if=&qu

C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案

在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基于JSON数据格式的Web API接口,在我之前的几篇随笔中,对这方面都有一定的介绍,本篇继续这个主题,细致深入的阐述如何在接口和源码的基础上整合Web API.微信后台管理及前端微信小程序的应用方案. 1.基于Web API的微信开发框架 首先我们各个业务模块,都应该围绕着Web API进行展开,

微信小程序实例教程(一)

序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 1. 获取微信小程序的 AppID 首先,我们需要拥有一个帐号,如果你能看到该文档,我们应当已经邀请并为你创建好一个帐号.注意不可直接使用服务号或订阅号的 AppID. 利用提供的帐号,登录https