前言

一、? 環(huán)境搭建

1、AppID

2、設置外觀和代理

3、小程序項目構成

小程序的基本結構

小程序的頁面組成部分

4、JSON 配置文件

JSON 配置文件的作用

app.json 配置文件

project.config.json 配置文件

sitemap.json 配置文件

頁面 .json 配置文件

5、WXML 模板

什么是 wxml

wxml 和 html 的區(qū)別

6、WXSS 樣式

什么是 wxss

wxss 和 css 的區(qū)別

7、小程序中的 JS

8、小程序宿主環(huán)境

通信模型

小程序的啟動過程

頁面渲染過程

二、?? 組件

1、小程序組件的分類

2、視圖容器類組件

3、view 組件 實現(xiàn)橫向分散布局

<!--pages/list/list.wxml-->
<view class="list">
  <view>
    A
  </view>
  <view>
    B
  </view>

  <view>
    C
  </view>
</view>

/* pages/list/list.wxss */

.list{
  /* 設置彈性布局 */
  display: flex;
  /* 設置橫向分散布局 */
  justify-content: space-around;
  /* 很詭異，margin-top有時會失效 */
  margin-top: 30rpx;
}

.list view{
  width: 200rpx;
  height: 200rpx;
  text-align: center;
  /* 設置文字行高 */
  line-height: 200rpx;
  
}


/* 設置子元素的背景顏色 */
.list view:nth-child(1){
  background-color: teal;
}

.list view:nth-child(2){
  background-color: rgb(57, 24, 150);
}


.list view:nth-child(3){
  background-color: rgb(189, 236, 236);
}

4、scroll-view 組件實現(xiàn)側邊欄

<!--pages/list/list.wxml-->
<!-- scroll-y 允許縱向滾動 -x 允許橫向滾動 -->
<!-- 注意：使用豎向滾動時必須給 scroll-view 一個固定高度-->
<scroll-view class="list" scroll-y>
  <view>
    A
  </view>
  <view>
    B
  </view>

  <view>
    C
  </view>
</scroll-view>

/* pages/list/list.wxss */

.list{
  /* 給一個邊框方便顯示容器 */
  border: 1rpx solid red;
  /* 調整容器寬度 */
  width: 200rpx;
  /* scroll-view 一個固定高度 */
  height: 230rpx;
  margin-top: 30rpx;
}

.list view{
  width: 200rpx;
  height: 200rpx;
  text-align: center;
  /* 設置文字行高 */
  line-height: 200rpx;
  
}


/* 設置子元素的背景顏色 */
.list view:nth-child(1){
  background-color: teal;
}

.list view:nth-child(2){
  background-color: rgb(57, 24, 150);
}


.list view:nth-child(3){
  background-color: rgb(189, 236, 236);
}

5、swiper 組件實現(xiàn)輪播圖及常用屬性

<!-- 輪播圖的結構 -->
<swiper class="swiper-container">

<!-- 第一個輪播圖 -->
  <swiper-item>
    <view class="item">
      A
    </view>
  </swiper-item>

<!-- 第二個輪播圖 -->
  <swiper-item>
    <view class="item">
      B
    </view>
  </swiper-item>

<!-- 第三個輪播圖 -->
  <swiper-item>
    <view class="item">
      C
    </view>
  </swiper-item>
</swiper>

.swiper-container{
  margin-top: 30rpx;
}
.swiper-container swiper-item view{
  text-align: center;
  line-height:300rpx;
}

swiper-item:nth-child(1) .item {
  background-color: teal;
}

swiper-item:nth-child(2) .item {
  background-color: rgb(68, 192, 43);
}

swiper-item:nth-child(3) .item {
  background-color: rgb(145, 50, 168);
}

6、text 和 rich-text 組件

7、其他常用組件

button 按鈕的基本使用

img 組件的基本使用

三、?? API

1、小程序API概述

2、三大分類

四、?? 協(xié)同工作

五、?? 發(fā)布上線

總結

文章來源地址http://www.zghlxwxcb.cn/news/detail-477944.html

到了這里，關于第一章 小程序入門的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！