csdn博客文章NO.9
前言
由于公司的业务发展需要,我不得不马上习得一门新的技能,那就是微信小程序。接触微信小程序,我觉得有些地方还是比较麻烦的,特别是文件比较多,json,wxss,wxhl,js。可能是这段时间一直在写flutter代码。样式,布局,业务逻辑可以一起写,这种感觉非常的方便。另一方面就是小程序封装的太死,这点很难受。在写tabbar的时候,直接是配置化的,这点难以接受,慢慢习惯吧!话不多收,直接总结知识点,其实官方文档上面写的已经非常,非常,非常的清楚了!
一、配置Tabbar?
在json文件里面不允许注释首先是对Tabbar的配置,里面的属性很见明只意Tabbar可以是在底部很导航栏的下方,在顶部的导航栏没有icon
{
//告诉小程序有管理有那些页面,第一个会是刚进来的页面
"pages":[
"pages/index/index",
"pages/demo02/demo02",
"pages/demo01/demo01",
"pages/search/search",
"pages/shopping/shopping",
"pages/mine/mine",
"pages/logs/logs"
],
//这个是窗口配置项
"window":{
// 下拉loading的样式
"backgroundTextStyle":"dark",
//最顶部导航栏的背景颜色
"navigationBarBackgroundColor": "#fff",
//标题
"navigationBarTitleText": "润龙购物",
//标题颜色,只能是黑色和白色
"navigationBarTextStyle":"black",
//是否开启刷新
"enablePullDownRefresh": true
},
"tabBar": {
//四个导航项
"list": [
{
//页面
"pagePath": "pages/index/index",
//icon下面的文字
"text": "首页",
//图标
"iconPath": "icons/home.png",
//选中的图标
"selectedIconPath": "icons/select-home.png"
},
{
"pagePath": "pages/shopping/shopping",
"text": "商品",
"iconPath": "icons/shopping.png",
"selectedIconPath": "icons/select-shopping.png"
},
{
"pagePath": "pages/search/search",
"text": "搜索",
"iconPath": "icons/search.png",
"selectedIconPath": "icons/select-search.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "icons/mine.png",
"selectedIconPath": "icons/select-mine.png"
}
],
//选中的字体颜色
"color": "#666666",
//没有选中的字体颜色
"selectedColor": "#333333"
},
"style": "v2",
//这个可要可不要,是一些关闭小程序的配置信息
"sitemapLocation": "sitemap.json"
}
swiper的使用
wxss样式
//100vw == 100%
swiper{
width: 100%;
height: calc(100vw * 280 / 520);
}
image{
width: 100%
}
//autoplay = "true" :是否开启自动轮播。默认为false
//indicator-dots="true" 是否显示指示图标,默认为false
//indicator-color = "#fff" 没有轮播到的指示颜色
//indicator-active-color = "#A9A9A9" 轮播到的指示颜色
<swiper autoplay = "true" indicator-dots="true" indicator-color = "#fff" indicator-active-color = "#A9A9A9">
<swiper-item>
<image src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"/>
</swiper-item>
<swiper-item>
<image src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"/>
</swiper-item>
<swiper-item>
<image src="https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"/>
</swiper-item>
</swiper>
数据绑定
wxml
//点击事件和input输入
<input type="text" bindinput="handleInput"/>
<button data-hi="{{1}}" bindtap="tapName">-</button>
<button data-hi="{{-1}}" bindtap="tapName">+</button>
<view>{{num}}</view>
js
Page({
data: {
value:"",
num:0
},
handleInput:function(e){
console.log(e)
},
tapName: function(event) {
this.setData({
num : this.data.num+event.currentTarget.dataset.hi
})
}
})
富文本
<rich-text nodes="{{html}}"></rich-text>
总结
今天学的有点昏昏的,但是比第一天学flutter的时候,学的知识点还是要多一点。