Python_小程序

1、開發前的準備工做

　　1.申請AppID：一個帳號對應一個小程序，我的/個體只能申請5個小程序

　　2.下載開發工具

2、小程序的文件結構

3、

　　1.數據綁定

　　　　1.1數據的設置

Page(
    data:{
        name:'name',
        age:18
    }
)

page.js的內容

　　　　1.2數據的調用

<view>{{name}}</view>
<view>{{age}}</view>

page.wxml

　　2.列表的渲染

　　　　2.1數據的設置

Page(
    data:{
        stundents:[
        {id:1,name:'alxes',age:11},
        {id:2,name:'alxes',age:12},
        {id:3,name:'alxes',age:13}
        ]
    }
)

page.js

　　　　2.2數據的調用

<view wx:for="{{stundents}}">{{item.id}}{{item.name}}item.age</view>

page.wxml

　　除了item以外，還有index內置的參數，標識條目的位置

　　3.事件的監控

　　　　3.1事件的定義

Page(
    data:{
        counter:0
    }
    handleEvent(){
        this.setDate({
            counter:this.data.counter+1
        })
    }    
)

page.js

　　　　3.2事件的引用

<button bindtap='handleEvent'>按鈕</button>

4、小程序的配置

　　1.project.config.json：項目配置文件，好比項目名稱，appid

　　2.sitemap.json：小程序搜索相關

　　3.app.json：全局配置，參考文檔：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

屬性	類型	必填	描述
pages	string[]	是	頁面路徑列表
window	Object	否	全局默認窗口表現
tabBar	Object	否	底部tab欄表現，底部導航欄

　　　　3.1tabBar設置　

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "/img/sy.jpg",
        "selectedIconPath": "/img/sy_active.jpg"
      },
      {
        "pagePath": "pages/classify/classify",
        "text": "首頁",
        "iconPath": "/img/fl.jpg",
        "selectedIconPath": "/img/fl_active.jpg"
      }
    ]
  }

底部分頁欄

　　4.page.json：頁面配置

　　　　頁面中的配置選項回覆蓋app.json中的windows中相同的配置選項

 5、頁面的生命週期（.js文件中）

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {
    
  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {
    
  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {
    
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

生命週期示例

6、基本組件介紹

　　1.text組件

 1 <view>
 2 <!-- 1.基本使用 -->
 3 <text>文本組件</text>
 4 </view>
 5  <view>
 6  <!-- 2.selectable屬性，文本是否可選。默認false -->
 7 <text selectable="{{ture}}">文本能夠被選擇</text>
 8  </view>
 9 <view>
10 <!-- 3.spaces屬性，顯示連續空格 -->
11 <text space="enap">中文字 符空格一半大小</text>
12 <text space="emsp">中文字 符空格大小</text>
13 <text space="nbsp">根據字 體設置的空格大小</text>
14 </view>
15 <view>
16 <!-- 4.decode,是否解碼,默認false -->
17 <text decode="{{ture}}">是否解碼</text>
18 </view>

使用說明

 　　2.button組件

<!-- 1.button的基本使用 -->
<button>這是個按鈕</button>
<!-- 2.size屬性， 建議使用mini-->
<button size="mini">mini屬性的按鈕</button>
<!-- 3.type屬性 -->
<button size="mini" type="primary">primary屬性的按鈕</button>
<button size="mini" type="default">default屬性的按鈕</button>
<button size="mini" type="warn">warn屬性的按鈕</button>
<!-- 4.plain，鏤空效果 -->
<button size="mini" plain>plain屬性的按鈕</button>
<!-- 5.disalbe：不可用 -->
<button size="mini" disalbe>disalbe屬性的按鈕</button>

使用說明

　　3.view組件

　　　　參考文檔：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

　　4.img組件

<!-- 1.基本使用
        1.1組件有默認的大小320*240
        1.2有一個行內塊級元素（inline-bolck）
 -->
<image></image>
<!-- scr屬性，本地路徑（相對路徑/絕對路徑）/ 遠程地址 -->
<image src="/img/flk.jpg"></image>
<image src="網絡地址"></image>
<!-- 相冊中的圖片 -->
<button bindtap="handleChooseAlbum">選中圖片</button>

基本使用

  data: {
    imagePath:''
  },

  handleChooseAlbum(){
    //系統API，讓用戶在相冊中選擇圖片或拍照
    wx.chooseImage({
      success: (res) =>  {
        //路徑
        const path = res.tempFilePaths[0]
        this.setData({
          imagePath : path
        })
      },
    })
  }

相冊功能

　　　　參考文檔：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

　　5.input組件：輸入框

　　　　參考文檔：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

　　6.scroll-view組件　　　　

<!-- 水平滾動 -->
<scroll-view class="container1" scroll-x>
  <view wx:for="{{10}}" class=".item1">{{item}}</view>
</scroll-view>

 <!-- 垂直滾動 -->
 <scroll-view class="container2" scroll-y>
  <view wx:for="{{10}}" class=".item2">{{item}}</view>
</scroll-view>

設置方法wxml文件

/* 設置橫向滑動 */
.contailner1{
  background: purple;
  white-space: nowrap;
}
.item1{
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
  display: inline-block;
}

/* 設置豎向滑動 */
.contailner2{
  background: orange;
  height: 200px;
  margin-top: 20px;
}
.item2{
  height: 100px;
  background: blue;
  margin:10px;
}

樣式設置方法wxss文件

　　　　參考文檔：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

7、共同屬性

屬性	描述	註釋
id	組件的惟一標識	整個頁面的惟一標識
class	組件的樣式表	在對應的wxss中定義的樣式表
style	組件的內聯樣式	能夠動態設置內聯樣式
hidden	組件是否顯示	全部組件默認顯示
data-*	自定義屬性	組件上觸發的事件十，會發送給事件處理的函數
bind*/cath*	組件的事件

 8、支持的選擇器

 

9、wxss的尺寸單位

　　1.使用rpx，可根據屏幕寬度進行自適應，建議作佈局設置以iPhone6爲實例。

10、引入wxss文件的方法

　　@import '引入文件的路徑';

11、官方樣式庫

　　https://github.com/Tencent/weui-wxss

12、must語法

　　1.引入變量 {{message}}

　　2.變量判斷{{age >=18 ? '成年人' : '未成年人'}}

　　3.bloot變量判斷<view class ='box {{isActive ? "active" : ""}}'>哈哈</view>

　　　　　　　　　isActive : false

十3、條件判斷

<!-- wx:if 的使用 -->
<view wx:if ="{{isShow}}">ha</view>
<!-- wx:else/wx:elif -->
<view wx:if="{{ score >= 90 }}">優秀</view>
<view wx:elif="{{ score >= 80 }}">l良好</view>
<view wx:elif="{{ score >= 60 }}">及格</view>
<view wx:else>及格</view>

代碼實例

　　在某些狀況下，咱們須要使用wx:if或者wx:for是，可能須要包裹一組組件標籤，這時候須要使用block標籤，block不是組就按，僅用來包裝元素

<view wx:for="{{movies}}">
  <view>電影序號:{{index}}</view>
  <view>電影名稱:{{item}}</view>
</view>

<block wx:for="{{movies}}">
  <view>電影序號:{{index}}</view>
  <view>電影名稱:{{item}}</view>
</block>

代碼示例

　　item、index起名字

<view wx:for="{{movies}}" wx:for-item="movie1" wx:for-indexx="i" >{{movie1}}-{{i}}</view>

十4、模板的使用

<!-- 設置 -->
<template name="contenItem">
  <button size='mini'>哈哈</button>
  <view>哈哈1</view>
</template>

<!-- 引用 ,-->
<template is="contenItem"/>
<!-- 引入文件 -->
<import scr="路徑"/>

<!-- 傳參數 -->
<template is="contenItem" data="{{btntex:'a',content:'e'}}"/>

示例

十5、wxs

<!-- wxs的定義方式 -->
<wxs module="info">
  // JS代碼
  var message = "hello word";
  var name = "coderwhy";
  
  var sum = function(num1,num2){
    return num1 + num2
  }
  //模塊數據導出
  module.exports = {
    message : message
    name : name
    sum : sum
  }

<!-- 導入方法 -->
<wxs src="路徑" module="info"/>

<!-- 引入方法 -->
<view>{{info.message}}</view>
<view>{{info.name}}</view>
<view>{{sum(20,30)}}</view>

示例

十6、常見的事件類型

　　input : bindinput bindblur bindfocus

　　scroll-view : bindscrolltowpper/bindscrolltolower

　　1.比較常見的事件類型

類型	觸發條件
touchstart	手指觸摸動做開始
touchmove	手指觸摸後移動
touchcancel	手指觸摸動做被打斷
touchend	手指觸摸動做結束
tap	手指觸摸後立刻離開
longpress	手指觸摸後，超過350ms在離開，若是指定了事件回調函數，並觸發這個事件，tap事件將不被觸發
longtap	手指觸摸後，超過350ms在離開

　　2.事件對象

屬性	說明
type	事件類型
timeStamp	頁面打開到觸發事件所通過的毫秒數
target	觸發事件的組件的一些屬性值組合
currentTarget	當前組件的一些屬性值集合
detail	額外的信息
touches	觸摸事件，當前停留在屏幕中觸摸點信息的數組
changedTouches	觸摸事件，當前變化的觸摸點信息的數組

　　3.事件冒泡和事件捕獲

　　　　3.1 bind一層層傳遞

　　　　3.2 catch 阻止事件進一步傳遞

十9、自定義組件

　　自定義組件一樣是由4個文件組成，創建一個公共的目錄，使用自定義組件　　

 1 <!-- 使用自定義組件，wxml文件中 -->
 2 <my-cpn></my-cpn>
 3 <!-- 在json文件中，註冊組件 -->
 4 {
 5   "usingComponents": {
 6       "my-cpn":"路徑"
 7   }
 8 }
 9 <!--組件中傳遞數據 -->
10 <!-- 在組件js文件中 -->
11 Component({
12    properties:{
13         title:{
14              type:String,
15              value:'默認值'
16           }   
17      } 
18 })
19 <!-- 在wxml文件中 -->
20 <my-cpn titile='哈哈'></my-cpn>    

組件的使用方法

1.組件傳遞樣式
Component({
   externalClasses:['titileclass'] 
})
引用

組件傳遞內容

組件傳遞方法

組件修改數據

 

二10、插槽

　　插槽一樣是4個文件組成，使用slot標籤

<!-- 插槽的定義 -->
<view><slot name='slot1'></view>
<view><slot name='slot2'></view>
<view><slot name='slot3'></view>

槽的定義

　　一樣插槽須要註冊，才能夠引用，注意須要在插槽的js文件中，引入下列內容

Component({
    options:{
          multipleSlots : true
     }
})

插槽的js文件中引入

二11、Component構造器

　　properties：定義傳入的屬性

　　data：定義內部屬性

　　methods：定義方法

　　options：額外配置選項

　　externalClasses：引入外部樣式

　　observers：屬性和數據監聽

　　pageLifetimes：頁面生命週期

　　lefetimes：組件生命週期

二12、網絡請求

　　wx.request封裝

 

 

二十3、展現彈窗API

　　showToast

　　showModal

　　showLoading

　　showActionSheet