開始學學小程序的基礎，個人筆記部分，無參考意義
part1網址

小程序開發入門

根目錄下的文件是全局配置，但會被具體的頁面配置覆蓋

新建小程序頁面

通過app.json新建頁面

教程中給的代碼是

"pages/home/home",
"pages/index/index",
"pages/logs/logs"

預覽結果爲

但如果我給的代碼是

"pages/index/index",
"pages/home/home",
"pages/logs/logs"

模擬器裏仍然是

所以說app.json裏的pages配置是有先後順序的，排在前面的先展示
新建頁面就是新建page

配置tabBar配置項

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#13227a",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "image/icon-tab1.png",
        "selectedIconPath": "image/icon-tab1-active.png",
        "text": "首頁"
      },
      {
        "pagePath": "pages/list/list",
        "iconPath": "image/icon-tab2.png",
        "selectedIconPath": "image/icon-tab2-active.png",
        "text": "活動"
      },
      {
        "pagePath": "pages/partner/partner",
        "iconPath": "image/icon-tab3.png",
        "selectedIconPath": "image/icon-tab3-active.png",
        "text": "夥伴"
      },
      {
        "pagePath": "pages/more/more",
        "iconPath": "image/icon-tab4.png",
        "selectedIconPath": "image/icon-tab4-active.png",
        "text": "更多"
      }
    ]
  }

color,selectedColor,backgroundColor三個參數就是三個地方的顏色，其中pagePath就是頁面的路徑

小程序的頁面配置

每一個小程序頁面也可以使用 .json 文件來對本頁面的窗口表現進行配置。頁面中配置項在當前頁面會覆蓋 app.json 的 window 中相同的配置項。文件內容爲一個 JSON 對象
但是也有一些屬性是app.json裏的windows沒有的

WXML與WXSS

只有wxml裏標籤的屬性賦值的時候採用等號，其餘位置（js，json）的數據都用冒號

鏈接與圖片

navigator

爲什麼頁面的路徑有兩個imgshow？
第一個imgshow指的是文件夾，第二個imgshow指的是下面的一系列imgshow文件

雲存儲

挺簡單的。

圖片的邊框美化

.imglist .img{
  border-radius: 18px;
  box-shadow: 15px 18px 30px rgba(53, 225, 82, 0.26);
}

圓角+陰影，綠了吧唧的

.imglist .circle{
  width: 200px;
  height: 200px;
  border-radius: 100%;
}

構架圓形的方式就是切成正方形，然後曲率百分百

view、navigator、image組件嵌套

CSS3 box-shadow 屬性
 CSS overflow 屬性
 CSS line-height 屬性
 CSS float 屬性
頁面裏有一塊如下所示

頁面代碼如下

<view class="event-box">
	<view class="event-address">深圳南山</view>
	<view class="event-time">2018年9月22日-23日</view>
</view>

css代碼如下

.event-address,.event-time{
  float: left;
  color: #cecece;
  font-size: 12px;
  padding-right: 15px;
}

我一時間不明白爲什麼這兩個view在一行了，後來我明白，是樣式裏的float，就是浮動，這兩個view都在event-box這個盒子裏，然後float使得這兩個樣式浮動在這個盒子的左側（也可以右側）

WeUI框架

WeUI牛逼！

模板樣式的更改

實際上就是在特定頁面下的wxss文件修改樣式

漸變與動畫

background-image: linear-gradient(19deg, rgb(33, 212, 253) 10%, rgb(183, 33, 255) 90%);

上述代碼的含義是，從10%處的第一個顏色，變到90%的第二個顏色，0到10範圍的顏色等於第一個參數的顏色

CSS z-index 屬性

<view class="userinfo-display">
    <view class="blur-bg"></view>
    <view class="user-img">
        <image src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/luffy.jpg"></image>
    </view>
</view>

.blur-bg {
    width: 750rpx;height: 300rpx;
    /* overflow: hidden; */
    background: url(https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/blurimg.jpg);
    background-size: cover;
    position: fixed;
    filter: blur(5px);
    z-index: -1;   
}
.user-img{
    width: 750rpx;height: 300rpx;
    display: flex;
    justify-content: center; 
    align-items:center;   
}
.user-img image {
  width: 80rpx;height: 80rpx;
  border-radius: 100%;
  /* z-index: 1; */
}

.blur-bg使用了position: fixed;這個參數的含義是，把對象固定到確定的位置，同時設置了position這個東西的對象是不會干擾到其他對象的位置的。
CSS position 屬性
例如

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
h2
{
	position:fixed;
	left:100px;
	top:150px;
}
h3
{
	position:fixed;
	left:120px;
	top:150px;
}
</style>
</head>

<body>
<h2>這是一個絕對定位了的標題</h2>
	<h3>這是一個絕對定位了的標題</h3>
<p>用絕對定位,一個元素可以放在頁面上的任何位置。標題下面放置距離左邊的頁面100 px和距離頁面的頂部150 px的元素。.</p>
</body>

</html>

CSS cursor 屬性

Transformer

<view>
    <text>盒子的多個屬性一起動畫: width, height, background-color, transform. 將鼠標或手指懸停在盒子上查看動畫之後放開。</text>
    <view class="animatebox" hover-class="animatebox-hover"></view>
</view>

.animatebox {
    display: block;
    width: 100px;
    height: 100px;
    background-color: #4a9d64;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.animatebox-hover {
    background-color: #cd584a;
    width:200px;
    height:200px;
    transform:rotate(180deg);
}

上面的案例代碼代表着是一次形狀轉換，代表着樣式從animatebox轉變成animatebox-hover，怎麼轉變的，就是由下面這個功能決定的

.selector {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

transition:width 2s, height 2s, background-color 2s, transform 2s;，意思爲width,height ,background-color,transform都是transition-property，代表着轉換過程中，需要改變的都有哪些屬性，2s意思就是時間，就比如width的意思就是從animatebox的width轉換到animatebox-hover的width需要兩秒。

animation

<view class="fadeIn">
 <view>注意會有一個無限顏色漸變變化的動畫</view>
    <image mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg" ></image>
</view>

@keyframes fadeIn {
  from {
    opacity: 0;
  }
 
  to {
    opacity: 1;
  }
}
 
.fadeIn {
  animation: 4s linear 0s infinite alternate fadeIn;
}

alternate
動畫交替反向運行，反向運行時，動畫按步後退，同時，帶時間功能的函數也反向，比如，ease-in 在反向時成爲ease-out。計數取決於開始時是奇數迭代還是偶數迭代

數據綁定

<view>{{movies}}</view>
<view>{{movies[1]}}</view>
<view>{{movies[1].actor}}</view>

實際效果如下

因爲他們都是OBJ啊

列表渲染與條件渲染

<view wx:for="{{newstitle}}" wx:key="*this">
  {{item}}
</view>

不太搞得清wx:key的含義是什麼，

<view wx:for="{{imgUrls}}" wx:key="*this" wx:for-index="idx">
  {{imgUrls[idx]}}
</view>

像上面的代碼一樣，idx可以嵌套在其他數據表達式裏

圖片樣式

這一節裏使用了代碼

<view class="page__bd">
    <view class="weui-panel weui-panel_access">
        <view class="weui-panel__bd" wx:for="{{movies}}" wx:for-item="movies" wx:key="*item">
            <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
                <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                    <image class="weui-media-box__thumb" mode="widthFix" src="{{movies.img}}" sytle="height:auto"></image>
                </view>
                <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                    <view class="weui-media-box__title">{{movies.name}}</view>
                    <view class="weui-media-box__desc">{{movies.desc}}</view>
                </view>
            </navigator>
        </view>
    </view>
</view>

實際效果如下，可以看到圖片有溢出了

需要修改樣式，改成如下就可以了

.weui-media-box__hd_in-appmsg{
  height: auto;
}

爲什麼呢，首先放圖片的那個盒子的樣式有一個weui-media-box__hd_in-appmsg，這個樣式固定了高度爲60，那麼如果圖片過大的話，就會溢出，所以入股哦我們修改這個樣式爲auto，盒子會自動計算內部盒子的高度，然後給個合適的高度

小程序組件

<audio src="{{musicinfo.src}}" poster="{{musicinfo.poster}}" name="{{musicinfo.name}}" author="{{musicinfo.author}}" controls></audio>

上面代碼裏有一個controls，這個屬性的默認值是false，如果只寫一個controls的話，相當於賦值爲true，而如果寫成:controls的話，就是賦值爲false，不能寫成controls=“true”，因爲這相當於賦值了一個字符串。
或者就在js文件中定義


1
2
3
4
<video id="daxueVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls event-model="bubble">
   <view class="covertext">騰訊大學：騰訊特色學習交流平臺</view>
   <image class="coverimg" src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/portal/css/img/nav/logo-bg-color.svg" ></image>
</video>

.covertext{
  width: 500rpx;
  color: white;
  font-size: 12px;
  position: absolute;
  top:20rpx;
  left:10rpx;
}
.coverimg{
  width:100rpx;height:23rpx;
  position: absolute;
  right:10rpx;
  top:10rpx;
}

position是absolute的時候，是相對於父級元素進行絕對定位

地圖組件

這個組件很複雜，而且模擬器裏的效果和手機效果不太一致
手機效果如下，同時沒法點擊氣泡

手機效果如下，氣泡可以點

優化部署與上線

小程序的轉發功能

onShareAppMessage: function (res) {
        if (res.from === 'button') {
            // 來自頁面內轉發按鈕
            console.log(res.target)
        }
        return {
            title: '雲開發技術訓練營',
            path: "pages/home/home,
            imageUrl:"https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg",
            success: function (res) {
                // 轉發成功
            },
            fail: function (res) {
                // 轉發失敗
            }
        }
    },

就是一段js代碼，返回值的要求可以查文檔，代碼裏括號裏的res不能少，我少了一次然後就得不到想要的效果了

動態模板

我發現動態模板讀取不了js文件裏的data，解決方案：微信小程序template模板動態傳數據
模板文件

<!--pages/common/head.wxml-->
<template name="head">
  <view class="page-head">
    <view class="page-head-title">{{title}}</view>
    <view class="page-head-line"></view>
    <view wx:if="{{desc}}" class="page-head-desc">{{desc}}</view>
  </view>
</template>

頁面文件，注意那個data參數，得這麼寫才能讀取到數據

<!--pages/home/home.wxml-->
<import src="/pages/common/foot.wxml" />
<import src="/pages/common/head.wxml" />
<text>pages/home/home.wxml</text>

<template is="head" data='{{...templateData}}' />

// pages/home/home.js
Page({
data: {
    templateData: {
      desc: true,
      title: "title"
    }
  }
})

小程序客服

那個按鈕實在太小了

<button open-type="contact" style="width:20px;height:20px"></button>

效果如下

【小程序】小程序技術訓練營學習筆記-part1