文章目錄

一.軟件使用

1.1.控制檯

比較類似於谷歌瀏覽器的

1.Wxml

1.2.開發者文檔

https://developers.weixin.qq.com/miniprogram/dev/component/

1.3.快捷鍵

1.代碼格式化

shift+alt+f

二.配置文件

2.1Appid

wx8a27bff7b2dae6f2

2.2.開發目錄

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

2.3.分析

1.utils

放公共得文件

2.pages

放自己定義得文件

三.app.json(配置)

3.1.定義

JSON 是一種數據格式
控制了小程序的目錄結構

3.2.代碼

所有頁面路徑
界面表現
網絡超時時間
底部tab

json不能註釋！

{
  
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    //背景文字樣式
    "backgroundTextStyle":"light",
    //導航欄背景顏色
    "navigationBarBackgroundColor": "#fff",
    //導航標題
    "navigationBarTitleText": "WeChat",
    //導航欄文字樣式
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3.3.pages對應

1.新建文件夾

2.新建pages

3.要對應

4.默認啓動順序

先啓動index
再啓動logs

3.4.windows

1.導航欄標題文字

navigationBarTitleText

"navigationBarTitleText": "WeChat",

2導航欄背景顏色

.navigationBarBackgroundColor

默認值是#000000

"navigationBarBackgroundColor": "#fff",

3.導航欄字體顏色

navigationBarTextStyle

black
white

4.開啓下拉刷新

enablePullDownRefresh

"enablePullDownRefresh":true

5.下拉刷新效果

backgroundTextStyle

dark
light

"backgroundTextStyle": "dark",

3.5.底部導航欄tabBar

至少要包含2個

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁",
      "iconPath": "pages/icons/index.png",
      "selectedIconPath": "pages/icons/index_active.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日誌",
      "iconPath": "pages/icons/index.png",
      "selectedIconPath": "pages/icons/index_active.png"
    }
    ]
  },

1.自動有補全

2.list數組

(1)pagePath

頁面的路徑

(2)text

tabBar名稱

(3)iconPath

圖標路徑

(4)selectedIconPath

選中時候圖標的路徑

(5)效果

3.color字體顏色

字體顏色

"color": "#000000",

4.選中後的顏色

selectedColor

可以截圖選取顏色
然後ctrl+C

"selectedColor": "#F94A35",

5.tarBar背景顏色

"backgroundColor": "#0094ff",

6.上邊框顏色

僅支持 black/white

"borderStyle":"black",

7.位置

"position":"top",

3.6.超時時間

networkTimeout

四.pages.json

4.1.與app.json區別

直接加入相關部分即可，不需要多加原來的文件

五.wxml(html)

5.1.顯示

1.直接顯示

<view>helloworld

</view>

2.顯示變量

1’js設置

  //定義變量
  data: {
    message:"hello world!",
    number:123456,
    isBoy:true,
    //類似於結構體
    person:{
        name:"小工",
        height:150
    }
  },

2’wxml設置{{}}

<view>hello world {{message}}

<view>number:{{number}}</view>
<view>isBoy{{isBoy}}</view>
<view>perser.name{{person.name}} -- person.height{{person.height}}</view>
</view>

3.換行

一對<view>就是一行

5.2.組件顯示

1.js設置

  data: {
    //title
    title:"這是一個新的頁面",
  },

2.wxml

<view data-id = "{{title}}">title</view>

5.3.單選框

<view><checkbox>請選擇</checkbox></view>
  <!-- 默認勾選 -->
  <view><checkbox checked="{{true}}">請選擇</checkbox></view>

六.運算

6.1.三元

1.定義變量

  data: {
    isChecked:true
  },

2.使用

<view>
<checkbox checked="{{isChecked ? true:false}}">
</checkbox>
</view>

6.2.算數

1.定義變量

  data: {
    num1:123,
    num2:456,
  },

2.wxml

<view>num1+num2:{{num1+num2}}</view>

6.3.邏輯判斷

1.js

  data: {
    len:123,
  },

2.wxml

<checkbox checked="{{len > 50}}">
</checkbox>

3.注意

引號""與括號之間{}沒有空格得！

七.列表渲染

7.1.wx:for

1.默認變量名

item wx:for - item

下標

index wx:for - index

2.遍歷數組

data: {
//數組
array:["蘋果","香蕉","西瓜"]
},

<view>
<view wx:for="{{array}}" 
wx:key="index">
<!-- index就是索引 -->
{{index}}:{{item}}
</view>
</view>

3.遍歷對象

  data: {
    person:{
      name:"郭德綱",
      height:150
    }
  },

<view wx:for="{{person}}" wx:key="index">
{{index}}:{{item}}
</view>

4.改名

<!-- index改名爲key -->
<view wx:for="{{person}}" wx:key="index" wx:for-index="key">
{{key}}:{{item}}</view>

5.不換行block

<block wx:for="{{person}}" wx:key="index" wx:for-index="key">
{{key}}:{{item}}</block>

7.2.wx:key

八.wxss(css)

8.1.尺寸單位

1.定義

rpx（respnsive pixel）可以根據屏幕寬度進行自適應
規定屏幕寬度爲750rpx,rpx可以看作是物理像素
750rpx=375px
1rpx=0.5px

2.常見尺寸

3.使用

<view class="box1">box</view>

.box1{
  /* 竟然用分號得.. */
  /* 樣式文件 */
  /* 750px 高度和寬度 100px */
    /* 375px 高度和寬度 50px */
  width: 100px;
  height:100px;
  font-size: 100rpx;
  background-color:aqua;
}

8.2.樣式導入

1.新建類？

.lg_box{
  width: 200px;
  height: 200px;
  background-color: aqua;
  font-size:50px;
  color: blue;
}

2.導入

@import "../../stylues/box.wxss";

8.3.內聯樣式

1.單行

  data: {
    myColor:"red"
  },

<view style="background-color: yellow;color:{{myColor}};">style</view>

2.類

  data: {
    myClass:"box",
  },

<view class="{{myClass}}">box</view>

.box{
  width: 50px;
  height: 50px;
  background-color: pink; 
}

8.4.選擇器

1.基本

8.5.全局與局部樣式

1.全局樣式

app.wxss

view{
  font-size: 25px;
}

九.基本組件

9.1.view

1.概念

類似於div

2.點擊使用

.hover_class{
  background-color: aqua;
  /* 透明度 */
  opacity: 5;
}

<view hover-class="hover_class">component</view>

9.2.text

1.概念

顯示普通得文本，text只能嵌套text

2.文本可選

<!-- 文本是可選 -->
<view><text selectable="true">普通得文本</text></view>

3.解碼

<!-- 解碼 變成空格-->
<text decode="true">普 &nbsp; 通</text>

9.3.image

1.概念

默認寬度是320px，高度是240px

2.使用

<view>
<!-- image標籤是web的img標籤和背景圖片的結合體 -->
<image src="../../images/heima.png"></image>
</view>

3.修改高度寬度

<view>
<!-- image標籤是web的img標籤和背景圖片的結合體 -->
<image src="../../images/heima.png" mode="scaleToTill"></image>
</view>

image{
  width: 100%;
  height: 300px;
  /* 紅色邊框 ,這裏要設置mode=上面那個*/
  border: 1px solid red;
}

9.4.swiper

1.概念

可以滑動的圖片

2.使用

<!-- 自動切換 -->
<swiper autoplay="true">

<swiper-item>
<image src="../../images/1.png" mode="withFix">
</image>
</swiper-item>

<swiper-item>
<image src="../../images/2.png" mode="withFix"></image>
</swiper-item>

<swiper-item>
<image src="../../images/3.png" mode="withFix"></image>
</swiper-item>

<swiper-item>
<image src="../../images/4.png" mode="withFix"></image>
</swiper-item>

</swiper>

image{
  width: 100%;
  height: 300px;
  /* 紅色邊框 */
  border: 1px solid red;
}

3.顯示…

indicator-dots="true"

<swiper autoplay="true" indicator-dots="true">
</swiper>

9.5.navigator

1.概念

導航組件，類似於超鏈接標籤
不能跳到tarBar

2.保留當前頁面

,wxml

<navigator url="../textView/textView" open-type="navigate">textView</navigator>

3.刪除當前頁面

,wxml

<navigator url="../textView/textView" open-type="redirect">textView</navigator>

4.跳到tabBar關閉其他

<!-- 跳轉到首頁 -->
<navigator url="../index/index" open-type="switchTab">index</navigator>

5.關閉所有，打開應用內某個頁面

,wxml

<navigator url="../index/index" open-type="reLaunch">index</navigator>

9.6.video

1.使用

,wxml

<!-- duration="60" 是60s播放時間 -->
<!-- autoplay是自動播放 -->
<!-- true 循環播放 -->
<!-- muted 靜音 -->
<video src="https://s1.ananas.chaoxing.com/audio/55/a9/e6/40486489bc1c22c7b136f588f21864fa/audio.mp3?at_=1587087954387&ak_=8ce0249bd5bceebefed8d24584ac8873&ad_=b72d6a4ddcd156a814fb10e04e6ee7e8" controls="true" duration="60" autoplay loop="true" muted ></video>

9.7.自定義組件

1.創建自定義組件

類似於頁面，有json,wxml,wxss,js這4個頁面組成

1’新建目錄結構

2’新建Component

3’聲明組件

.json

{
  "component": true,
  "usingComponents": {}
}

  properties: {
    cData:{
      valub:"組件默認值",
      type:String,
    }
  },

.wxss

.my_header{
  font-size: 50px;
  background-color: yellow;
}

4.引用組件

.json

{
  "usingComponents": {
    "MyHeader":"../../components/MyHeader/MyHeader"
  }
}

wxml

<view>
<MyHeader>
我的組件
</MyHeader>
</view>

微信小程序(01)快速入門

文章目錄

一.軟件使用

1.1.控制檯

1.Wxml

1.2.開發者文檔

1.3.快捷鍵

1.代碼格式化

二.配置文件

2.1Appid

2.2.開發目錄

2.3.分析

1.utils

2.pages

三.app.json(配置)

3.1.定義

3.2.代碼

3.3.pages對應

1.新建文件夾

2.新建pages

3.要對應

4.默認啓動順序

3.4.windows

1.導航欄標題文字

2導航欄背景顏色

3.導航欄字體顏色

4.開啓下拉刷新

5.下拉刷新效果

3.5.底部導航欄tabBar

1.自動有補全

2.list數組

(1)pagePath

(2)text

(3)iconPath

(4)selectedIconPath

(5)效果

3.color字體顏色

4.選中後的顏色

5.tarBar背景顏色

6.上邊框顏色

7.位置

3.6.超時時間

四.pages.json

4.1.與app.json區別

五.wxml(html)

5.1.顯示

1.直接顯示

2.顯示變量

1’js設置

2’wxml設置{{}}

3.換行

5.2.組件顯示

1.js設置

2.wxml

5.3.單選框

六.運算

6.1.三元

1.定義變量

2.使用

6.2.算數

1.定義變量

2.wxml

6.3.邏輯判斷

1.js

2.wxml

3.注意

七.列表渲染

7.1.wx:for

1.默認變量名

2.遍歷數組

3.遍歷對象

4.改名

5.不換行block

7.2.wx:key

八.wxss(css)

8.1.尺寸單位

1.定義

2.常見尺寸

3.使用

8.2.樣式導入