小程序初识
- 注册AppID
- vscode开发微信小程序
- 初识
-
- app.json中的tobar配置
- 小程序组件应用
-
- icon
- swiper
注册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>