用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

05年湖人vs小牛:微信小程序——基礎知識

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-11-26 00:02

目錄結構介紹一個小程序至少由倆個文件組成app.js和app.json1.app.js小程序邏輯 2.app.json小程序全局配置 3.app.wxss小程序公共樣式表 4.project.config.json開發項目時工具配置文件。一個小程序頁面由四個文件組成 ...

目錄結構介紹

一個湖人vs爵士季后赛至少由倆個文件組成 app.js 和 app.json 1. app.js 小程序邏輯 2. app.json 小程序全局配置 3. app.wxss 小程序公共樣式表 4. project.config.json 開發項目時工具配置文件。

一個小程序頁面由四個文件組成

傳統web小程序
結構HTMLwxml
樣式表CSSwxss
邏輯Javascriptjs
配置json

初始化頁面的倆個警告:warning:

:warning:根據 sitemap 的規則[0],當前頁面 [pages/index/index] 將被索引 解決方案:小程序項目配置文件 project.config.json 的 setting 中配置字段 "checkSiteMap": false
"setting": {
    "checkSiteMap": false
},
復制代碼

:warning:獲取 wx.getUserInfo 接口后續將不再出現授權彈窗,請注意升級解決方案:清空 App.js

全局配置路由、導航欄和tabBar

小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置,決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

路由 Pages

路由 Pages | 微信開放文檔

項目開發目錄為:

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils
復制代碼

則需要在 app.json 中寫

{
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ],
}
復制代碼

頂部導航 window

頂部導航 window | 微信開放文檔

用于設置小程序的狀態欄、導航條、標題、窗口背景色。

window屬性說明文檔

屬性描述
backgroundTextStyle下拉 loading 的樣式,僅支持 dark / light
navigationBarBackgroundColor導航欄背景顏色,如 #000000
navigationBarTitleText導航欄標題文字內容`
navigationBarTextStyle導航欄標題顏色,僅支持 black / white
enablePullDownRefresh是否開啟當前頁面的下拉刷新 true / false

代碼實例

{
    "window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#0081ff",
        "navigationBarTitleText": "教育Top10",
        "navigationBarTextStyle": "white",
        "enablePullDownRefresh": true
    },
}
復制代碼

如何設置某個單頁面的導航欄?

自定義頂部欄,文字、背景色,在該單頁面的 json

里添加如下:

{
	"usingComponents": {},
    "navigationBarTitleText": "課程列表",
    "navigationBarBackgroundColor": "#0081ff",
    "navigationBarTextStyle": "white"
}
復制代碼

隱藏頂部欄,在該單頁面的 json 里添加如下:

{
    "navigationStyle": "custom"
}
復制代碼

底部 tabBar

底部 tabBar | 微信開放文檔 小程序是一個多 tab 應用,可以通過 tabBar 配置項指定 tab 欄的表現,及切換時顯示的對應頁面。

tabBar屬性說明文檔

屬性描述
colortab 上的文字默認顏色,僅支持十六進制顏色
selectedColortab 上的文字選中時的顏色,僅支持十六進制顏色
backgroundColortab 的背景色,僅支持十六進制顏色
borderStyletabbar上邊框的顏色, 僅支持 black / white
custom自定義 tabBar,見 詳情
listtab 的列表,詳見 list 屬性說明

list 數組,包含 tab 最少 2 個、最多 5 個

list屬性描述
pagePath路由:跳轉到指定頁面
text底部導航文字
iconPath底部導航圖標、未選中狀態
selectedIconPath底部導航圖標、選中狀態

代碼實例

{
    "tabBar": {
        "color": "#333",
        "selectedColor": "#0081ff",
        "borderStyle": "black",
        "backgroundColor": "#fff",
        "list": [
            {
                "pagePath": "pages/tabBar/tabBar_home/tabBar_home",
                "text": "首頁",
                "iconPath": "images/Tabbar/home.png",
                "selectedIconPath": "images/Tabbar/home_cur.png",
            },
            {
                "selectedIconPath": "images/Tabbar/my_cur.png",
                "iconPath": "images/Tabbar/my.png",
                "pagePath": "pages/tabBar/tabBar_myCenter/tabBar_myCenter",
                "text": "個人中心"
            }
        ],
    }
}
復制代碼

基礎組件

view 視圖容器

text 文本

<text>純文本</text> 組件之間只能包含純文本,在text中寫其他標簽,將會被忽略掉

<text 
    class="info" 
    id="zbc" 
    style="" 
    bindtap="_fun" 點擊事件
    hidden="true" 顯示隱藏[微信小程序--hidden不生效原因及解決方案?]
    data-user="user" 自定義組件
>
    hello world
</text>
復制代碼

image 圖片

微信小程序 Image 圖片實現寬度100%,高度自適應 mode="widthFix"

<image class="img" src="../../images/hello.png" mode="widthFix">

.img{width: 100vw;}
復制代碼

Flex 布局

Flex 布局兼容性

Flex 布局屬性

要使用彈性布局,通過 display: flex 或者 display: inline-flex 來將此元素定義為彈性容器。

  1. flex-direction 決定元素的排列方向

    row
    column
    
  2. flex-wrap 決定元素如何換行

    nowrap
    wrap
    
  3. justify-content 定義主軸為水平方向,分布方式。

    flex-start
    flex-end
    center
    space-between
    space-around
    
  4. align-items 定義主軸為垂直方向,分布方式。

    flex-start
    flex-end
    center
    
  5. flex: 1 權重,分配主軸上剩余的空間(有圖)

<view style="display:flex;">
    <view class="A" style="width: 140rpx;height: 80rpx; flex: 1;"></view>
    <view class="B" style="width: 140rpx;height: 80rpx;"></view>
    <view class="C" style="width: 140rpx;height: 80rpx;"></view>
    <view class="D" style="width: 140rpx;height: 80rpx;"></view>
</view>
復制代碼

數據綁定

數據綁定 | 微信開放文檔

簡單綁定

<view> {{ message }} </view>
復制代碼
Page({
  data: {
    message: 'Hello MINA!'
  }
})
復制代碼

三元運算

<view hidden="{{flag ? true : false}}"> Hidden </view>
復制代碼

算數運算

<view> {{a + b}} + {{c}} + d </view>
復制代碼
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
復制代碼

view中的內容為 3 + 3 + d。

是否同意該協議表單按鈕

<checkbox checked="{{false}}"> </checkbox>
復制代碼

特別注意:不要直接寫  checked="false" ,其計算結果是一個字符串,轉成 boolean 類型后代表真值。

列表渲染wx:for

列表渲染 | 微信開放文檔

在組件上使用 wx:for 控制屬性綁定一個數組,即可使用數組中各項的數據重復渲染該組件。 默認數組的當前項的下標變量名默認為 index ,數組當前項的變量名默認為 item 數據綁定使用 {{}} 將變量包起來,可以作用于:

輪播圖wx:for

<swiper>
    <swiper-item wx:for="{{banner}}" wx:key="{{index}}">
        <image src="{{item.img}}"></image>
    </swiper-item>
</swiper>
復制代碼
Page({
    data: {
        banner: [{
            img: '../../images/swiper-1.jpeg',
        }, {
            img: '../../images/swiper-2.jpeg',
        }]
    }
})
復制代碼

上述代碼的簡略版

<swiper>
    <swiper-item wx:for="{{2}}" wx:key="{{index}}">
        <image src="../../images/swiper-{{index + 1}}.jpeg"></image>
    </swiper-item>
</swiper>
復制代碼

wx:for-item 和 wx:for-index

使用 wx:for-item 可以指定數組當前元素的變量名, 使用 wx:for-index 可以指定數組當前下標的變量名:

<swiper>
    <swiper-item wx:for="{{banner}}" wx:for-index="idx" wx:for-item="itemName">
        <image src="{{itemName.img}}"></image>
    </swiper-item>
</swiper>
復制代碼

wx:key

wx:key 是列表中唯一的字符串或數字,且不能動態改變。例如:

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
復制代碼
Page({
    data: {
        objectArray: [
            { id: '時間', unique: 'unique_5' },
            { id: '速度', unique: 'unique_4' },
            { id: '路程', unique: 'unique_3' },
            { id: 2, unique: 'unique_2' },
        ],
    },
})
復制代碼

小鹿咖啡的菜單【實例】

<scroll-view scroll-y class="rightBar">
        <view class="rightBar_Item" wx:for="{{foodList}}" wx:key="{{index}}">
            <view class="series_Title flex">
                <view class="drink_Title_name">{{item.title}}</view>
                <view class="drink_Title_line"></view>
            </view>
            <view class="drink_List">
                <view class="drink_Item flex" wx:for-item="it" wx:for="{{item.food}}" wx:key="{{index}}">
                    <view class="drink_Img">
                        <image class="drink_Img" src="{{it.img}}"></image>
                        <view class="tip" wx:if="{{it.tip}}">{{it.tip}}</view>
                    </view>
                    <view class="drink_Cont">
                        <view class="drink_Title">
                            <view class="drink_Ch_Title">{{it.name}}</view>
                            <view class="drink_En_Title">{{it.enname}}</view>
                        </view>
                        <view class="ju_between">
                            <view class="drink_price">{{it.price}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </scroll-view>
復制代碼
Page({
    data: {
        "foodList": [
            {
                "id": 1,
                "title": "大師咖啡",
                "food": [
                    {
                        "id": 1,
                        "img": "//r.photo.store.qq.com/psb?/V12jhopW1tjEiY/SvHL13tH2g5UKUmVrbCjAPs4sLNBvAo7fhdJGpEU1.s!/r/dFQBAAAAAAAA",
                        "name": "摩卡",
                        "enname": "Mocha",
                        "price": "27",
                        "tip": "買2增1"
                    },
                ]
            },
            {
                "id": 2,
                "title": "小鹿茶",
                "food": [
                    {
                        "id": 1,
                        "img": "//r.photo.store.qq.com/psb?/V12jhopW1tjEiY/VoBwYjGp2dIkV1owMWjVr4rm6Tp3wl8H1Gsa7n5hh08!/r/dFQBAAAAAAAA",
                        "name": "活力檸檬紅寶石茶",
                        "enname": "Lemon Ruby Tea",
                        "price": "24",
                        "tip": "買2增1"
                    },
                    {
                        "id": 2,
                        "img": "//r.photo.store.qq.com/psb?/V12jhopW1tjEiY/o7p7XoYAGaeMH6EtQNPVbU8tHFnKZitOcl9RarOcqNA!/r/dAgBAAAAAAAA",
                        "name": "桃桃山霧烏龍茶",
                        "enname": "White & Yellow Peach Oolong Tea",
                        "price": "24"
                    }
                ]
            }
        ]
    },
})
復制代碼

條件渲染wx:if

條件渲染 | 微信開放文檔

wx:if使用方法

wx:if="{{false}}" , wx:if="{{true}}"

在小程序里面識別boolean值時,只要屬性的值 不為空時,boolean就判斷為真,就算里面隨便幾個字符,例如 wx:if="11223" ,也判斷為真, 如果需要為false,就必須采用數據綁定的方式{{false}},才能被小程序解析為假。

在框架中,使用 wx:if="" 來判斷是否需要渲染該代碼塊: 也可以用  wx:elif 和  wx:else 來添加一個 else 塊:

<view wx:if="{{length > 85}}">優秀</view>
<view wx:elif="{{length > 60}}">及格</view>
<view wx:else>不及格</view>
復制代碼
Page({
    data: {
        length: 61,
    }
})
復制代碼

結果:及格

的使用

注意: <block/> 并不是一個組件,它僅僅是一個包裝元素,將多個組件包裝起來,不會在頁面中做任何渲染,只接受控制屬性。 wx:if 和 wx:for 含有 <block/> 的寫法

data: {
        modalToggle: false,
    },
復制代碼
<block wx:if="{{modalToggle}}">
    	<view class="modalWrap">
        	<view class="modal"></view>
    	</view>
	</block>

復制代碼

不含有 <block/> 的寫法

data: {
        modalToggle: false,
    },
復制代碼
<view class="modalWrap" wx:if="{{modalToggle}}">
    	<view class="modal"></view>
	</view>
復制代碼

教育Top10收藏列表【實例】

頁面描述:當有數據時,顯示左側列表。當沒有數據時,則顯示右側內容

<block wx:if="{{list.length>0}}">
    <block wx:for="{{list}}" wx:key="idx">
        <view>{{item}}</view>
    </block>
</block>
<block wx:else>
    <view>暫時未收藏哦~</view>
</block>
復制代碼
Page({
    data: {
        list: ['月落烏啼霜滿天','江楓漁火對愁眠']
    },
})
復制代碼

wx:if vs  hidden

1. wx:if 在初始渲染條件為  false ,框架什么也不做,在條件第一次變成真的時候才開始局部渲染。所以當  wx:if 的條件值切換時,框架有一個局部渲染的過程,確保條件塊在切換時銷毀或重新渲染。 2. hidden 就簡單的多,組件始終會被渲染,只是簡單的控制顯示與隱藏。

總結: wx:if 有更高的切換消耗,而  hidden 有更高的初始渲染消耗。因此,如果需要頻繁切換的情景下,用  hidden

hidden不生效原因及解決方案?

<view hidden="true" style="display:flex;">
    <text>text1</text>
    <text>text2</text>
</view>
復制代碼

你會發現 hidden 沒生效。經我實驗發現 hidden 元素對塊狀布局才生效,所以這段代碼里導致 hidden 沒生效的罪魁禍首是 display:flex 。把這個去掉就可以了。

如果一定要用flex布局怎么辦?

其實這里想用 hidden 無非就是想影藏這個布局, display:none 也能做到隱藏。這里可以用一個取巧的方法,動態設置 display 屬性,示例如下:

<view style="display:{{hideview ? 'none' : 'flex'}};">
    <text>text1</text>
    <text>text2</text>
</view>
復制代碼

這里的 hideview 是在對應的 js 里是一個變量,由 js 來動態控制。

分享至 : QQ空間
收藏
原作者: 菜雞來尋碼 來自: 掘金
蓝月娱乐棋牌最新版 稳赚包六肖三期必出一期六肖中奖 千炮捕鱼水果机电玩城 网赌刷反水最有效方法 重庆百变王牌预测 qq捕鱼达人3d作弊器 广东快乐10分下载11选5 快乐扑克概率 千炮捕鱼单机版 深海捕鱼千炮版外挂 辽宁11选5计划 20岁在杭州如何赚钱 武汉卖植物赚钱 高频彩上海时时乐下载 内蒙古时时彩计划 体彩排列五走势图浙江