微信小程序

目錄結構：pages/

　　　　　　　　index/

　　　　　　　　　　index.js  配置文件入口，page()

　　　　　　　　　　index.wxml  配置頁面佈局、UI

　　　　　　　　　　index.wxss   頁面的樣式文件，可選，可覆蓋app.wxss

　　　　　　　　　　index.json   頁面當前窗口定義 "window"，可選，可覆蓋app.json 的window中的配置

　　　　　app.js           App()  定義一個實例化方法，傳入config配置項；定義項目的啓動入口

　　　　　app.json        "pages":數組，配置每一個頁面；"window":JSON對象，定義當前窗口設置

　　　　　app.wxss       項目樣式 （可選）

 

 

數據的雙向綁定：.wxml:{{text}}  在 .js 裏定義data:{text:'xxx'}

　　　　　　　　　　　　bindtap='btnClick'             btnClick:function(){ this.setData({text:'new xxx'})}

 

渲染模式：條件渲染  判斷標籤<view wx:if="{{false}}">{{text}}1</view>  若是爲false 就掩藏，爲true 就顯示。<view wx:else >{{text}}2</view>

　　　　循環標籤：<view wx:for="{{['aaa','bbb','ccc']}}">{{index}}-{{item}}</view>    //其中默認爲item 讀取到數組中的每一項，能夠經過wx:for-item='news-item' 自定義；

<view wx:for="{{['aaa','bbb','ccc']}}" wx:for-item="itemx">{{itemx}}</view>

模版飲用：

方式1:include 至關於把所有內容包括節點引入進來：<include src="../templates/header" />

方式2:import 導入<template>  須要指定name值

<import src='../template/footer'/>

<template is='footers' data="{{text:'導入的設置內容...'}}" />    同時設置data來激活模版中的{{text}}

 

事件 ： 

點擊事件 tap 

長按事件 longtap

觸摸事件  touchstart  touchend  touchmove  touchcancel

其餘  submit  input...

事件冒泡：點擊事件、長安事件、觸摸事件都屬於冒泡事件

經過bindtap綁定的事件會觸發事件冒泡

經過catchtap綁定的事件不會觸發事件冒泡

事件的對象：currenttarget是當前綁定的事件

　　　　　　target是觸發的事件源 是冒泡的根元素

　　　　　　dataset  自定義屬性 data-id=''  data-title=''

 

api配置：參考官網https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=20161122

app的生命週期：

App({
onLaunch: function () {
   數據加載
},
onShow: function () {
   顯示
},
onHide: function () {
切換至後臺時　　
}
})

可在app裏定義全局變量或方法，子頁面經過var app= getApp() ; app.xxx獲取

 

頁面page()的生命週期

Page({
data:{
String1
},
onLoad:function(options){   1
// 頁面初始化 options爲頁面跳轉所帶來的參數
String2
},
onReady:function(){      3
// 頁面渲染完成
String3
},
onShow:function(){       2
// 頁面顯示  、進入此頁面觸發
String4
},
onHide:function(){
// 頁面隱藏,\跳轉至其餘頁面時觸發 、切換至後臺
String5
},
onUnload:function(){
// 頁面關閉 、離開的此頁面觸發
String6
}
})

 

頁面跳轉：

方式1  wx.navigateTo({url:'../logs/logs?id=1'})

　　　　wx.redirectorTo({...})   禁用返回

方式2  <navigator url='' redirector><view....</navigator>    //加redirector 禁用了返回功能

 

佈局
1 flex佈局

 

flex container 容器的屬性：

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

flex-wrap 決定元素是否換行 wrap-reverse;wrap; nowrap;

flex-flow:flex-direction和flex-wrap的簡寫  row nowrap;

justify-content 元素在主軸上的對齊方式 center; flex-start; flex-end; space-around均勻對齊 ; space-between兩端對齊；

align-items 元素在交叉軸上的對齊方式  stretch （當元素沒設置高度時，讓item佔據整個容器的高度）；baseline:之內在一行文字的對齊；center ； flex-start； flex-end；

flex item 元素的屬性：

flex-grow 當空間多餘時，元素的放大比例   默認爲0  1標示均勻充滿主軸容器寬度。

flex-shrink 當空間不足時，元素的縮小比例 默認爲1 當空間不足時 默認等比縮小；0不縮小

flex-basis 元素在主軸上佔據的空間    300px;

flex 是grow shrink basis 的簡寫

order 定義元素的排列順序    

align-self 定義元素自身的對齊方式  （會覆蓋align-items)

2 相對佈局 絕對佈局

relative  想對自身的定位

absolute 相對於最近的已定位的父元素進行的定位

動態僞類選擇器(:link,:visited,:hover,:active,:focus)

狀態僞類選擇器(:enabled,:disabled, :checked)   按鈕禁用 選中

選擇僞類選擇器(:first-child,:last-child,:nth-child(),:nth-last-child(),:nth-of-type(),:nth-last-of-type(),:first-of-type,:last-of-type,:only-child,:only-of-type)

空內容僞類選擇棄(:empty)

否認僞類選擇棄(:not)

僞元素(::first-line第一行使用特定樣式, ::first-letter第一個字符使用某種樣式, ::before, ::after, ::selection)    .text1::after{content:'...';}在text1文本後添加文本...

基礎內容組件：icon  text progress

視圖容器組件：view scroll-view  swiper

UI高級組件：

1 action-sheet   <action-sheet hidden='{{}}' bindchange=''></action-sheet>

2 toast     <toast hidden="{{toastHidden}}" duraction="1000"></toast>

3 loading  <loading hidden="{{loadingHidden}}"></loading>

導航組件<navigator url='../logs/logs' redirect><view...</navigator>

地圖組件<map ....>

畫布 canvas 

請求服務器數據：wx.request({url:'',data:{x:'',y:''},hearder:{},success:function(res){}})

 

產品開發過程 ：

Xmind 思惟導圖分析需求

墨刀  原型圖設計：頁面元素   數據邏輯   操做邏輯

產品層級、組建模塊化設計：（緣由1 有代碼大小限制、2 提升代碼複用率）

方法1  經過WXML的import 和 include 來使用文件模版

　　2  使用WXSS的@import 來引用 WXSS 文件

　　3  使用JS的 require 來引用js文件