小程式初識
- 注冊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>