小程序学习-01

注册AppID

在这里插入图片描述
或者使用测试号,如果需要上线需要注册AppID

vscode开发微信小程序

参考下文,在vscode中放插件,在微信开发者工具中调试
https://blog.csdn.net/weixin_42216818/article/details/104259390

初识

这里是注册页面的地方,每个页面在这里会有显示
在这里插入图片描述

app.json中的tobar配置

{
  "pages":[
    "pages/index/index",
    "pages/middle/index",
    "pages/mine/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/middle/index",
      "text": "中间栏"
       
    },
     {
      "pagePath": "pages/mine/index",
      "text": "日志"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

在这里插入图片描述
还可以设置图标和文字点击后颜色,这个地方很容易把tabBar的color和selectedColor放到list里,此时就不能生效。

 "tabBar": {
    "color":"#707070",
    "selectedColor":"#515151",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "pages/images/first-be.png",
      "selectedIconPath": "pages/images/first-af.png"
    },{
      "pagePath": "pages/middle/index",
      "text": "中间栏",
      "iconPath": "pages/images/read-be.png",
      "selectedIconPath": "pages/images/read-af.png"
       
    },
     {
      "pagePath": "pages/mine/index",
      "text": "我的",
      "iconPath": "pages/images/mine-be.png",
      "selectedIconPath": "pages/images/mine-af.png"
    }]
  },

在这里插入图片描述

小程序组件应用

icon

<view class="container">
	<text class="" selectable="false" space="false" decode="false">小程序</text>
	<icon
	 class="icon1"
	 type="success"
	 size="23"
	 color="red"
	>
	</icon>
	<icon
	 class="icon2"
	 type="warn"
	 size="23"
	 color="blue"
	>

	</icon>
</view>

在这里插入图片描述

swiper

<view class="container">
	<view class="banner">

		<swiper
		 indicator-dots="true"
		 autoplay="true"
		 interval="3000"
		 duration="1000"
		>
			<block wx:for="{{banner}}" wx:key="*this">
				<swiper-item>
					<image class="swiper-img" src="{{item}}"></image>
				</swiper-item>
			</block>
		</swiper>
	</view>
</view>


在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值