无人区97在线,年轻人不卡视频,日韩欧美综合

前言: 文中參照官方文檔, 加入一些自己的理解.

入門(一)
基礎(chǔ)(二)
進階(三)
綜合(四)

賬號申請
登錄獲取AppID
開發(fā)工具
各個類型文件解析
支持的運算
代碼演示
如何調(diào)試

一. 微信小程序賬號申請

https://mp.weixin.qq.com/wxopen/waregister?action=step1 然后一步一步按照注冊流程走就好了, 這里沒有需要注意的點.

二. 登錄

https://mp.weixin.qq.com 可以在菜單 “設(shè)置”-“開發(fā)設(shè)置” 看到小程序的 AppID 了.

展示AppID所在位置

三. 開發(fā)工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18111420 這個根據(jù)自己的電腦的操作系統(tǒng)自行選擇就好.

支持的系統(tǒng): Windows 64位 / Windows 32位 / Mac OS

還可以使用: Visual Studio Code, sublime Text等.

四. 文件解析

樣圖 - 3

app.json : 是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時時間、底部 tab 等等
xx.josn: 單頁面配置

{
  /// 頁面路徑配置
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    /// 全局樣式設(shè)置
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
},
"tabBar": {
    "selectedColor": "blue",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "pages/resource/2.png",
        "selectedIconPath": "pages/resource/1.png",
        "text": "首頁"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "pages/resource/2.png",
        "selectedIconPath": "pages/resource/1.png",
        "text": "日志"
      }
    ]
  }

pages字段 —— 用于描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。
window字段 —— 定義小程序所有頁面的頂部背景顏色，文字顏色定義等。

備注 : 詳情可以參照這里

小程序生命周期

屬性	描述	觸發(fā)時機
onLaunch	生命周期回調(diào)—監(jiān)聽小程序初始化	小程序初始化完成時（全局只觸發(fā)一次）
onShow	生命周期回調(diào)—監(jiān)聽小程序顯示	小程序啟動，或從后臺進入前臺顯示時
onHide	生命周期回調(diào)—監(jiān)聽小程序隱藏	小程序從前臺進入后臺時
onError	錯誤監(jiān)聽函數(shù)	小程序發(fā)生腳本錯誤，或者 api 調(diào)用失敗時觸發(fā)，會帶上錯誤信息
onPageNotFound	頁面不存在監(jiān)聽函數(shù)	小程序要打開的頁面不存在時觸發(fā)，會帶上頁面信息回調(diào)該函數(shù)

project.config.json: 通常大家在使用一個工具的時候，都會針對各自喜好做一些個性化配置，例如界面顏色、編譯配置等等，當你換了另外一臺電腦重新安裝工具的時候，你還要重新配置。考慮到這點，小程序開發(fā)者工具在每個項目的根目錄都會生成一個 project.config.json，你在工具上做的任何配置都會寫入到這個文件，當你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包，開發(fā)者工具就自動會幫你恢復(fù)到當時你開發(fā)項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。(這是之后新增的).
WXML: 網(wǎng)頁編程采用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結(jié)構(gòu)布局，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和用戶的交互。微信小程序也類似, 其中 WXML 充當?shù)木褪穷愃?HTML 的角色, 代碼結(jié)構(gòu)大致如下:

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像昵稱 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

HTML 經(jīng)常會用到的標簽是 div, p,span , 而小程序使用的WXML 用的標簽是 view,button, text 等等, 就是小程序給開發(fā)者包裝好的基本能力.

補充: 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式

小程序的框架也是用到了MMVM這個思路，如果你需要把一個 Hello World 的字符串顯示在界面上, 你可以這樣做。
通過 {{ }} 的語法把一個變量綁定到界面上，我們稱為數(shù)據(jù)綁定。僅僅通過數(shù)據(jù)綁定還不夠完整的描述狀態(tài)和界面的關(guān)系，還需要 if/else, for等控制能力，在小程序里邊，這些控制能力都用 wx: 開頭的屬性來表達。

在WXML文件

<text>{{msg}}</text>

在xx.js文件

this.setData({ msg: "Hello World" })

具體演示代碼
index.wxml

<view>{{ msg }}</view>
    <button bindtap="clickMe">點擊我</button>

index.js 這里相應(yīng)用戶的點擊并把夏天很暖傳給view, 并顯示出來

clickMe: function () {
    this.setData({ msg: "夏天很暖" })
  }

詳細可以看這里這里不做展開, 如果有下節(jié), 可以繼續(xù)深入研究.

app.wxss: 全局樣式
xx.wxss: 單界面樣式

新增了尺寸單位。在寫 CSS 樣式時，開發(fā)者需要考慮到手機設(shè)備的屏幕會有不同的寬度和設(shè)備像素比，采用一些技巧來換算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ，開發(fā)者可以免去換算的煩惱，只要交給小程序底層來換算即可，由于換算采用的浮點數(shù)運算，所以運算結(jié)果會和預(yù)期結(jié)果有一點點偏差。

提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同，你可以寫一個 app.wxss 作為全局樣式，會作用于當前小程序的所有頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。

此外 WXSS 僅支持部分 CSS 選擇器

備注說明: 全局樣式與局部樣式

定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應(yīng)的頁面，并會覆蓋 app.wxss 中相同的選擇器。

JS交互: 界面展示為小程序的一部分, 同時也要有和用戶的交互, 響應(yīng)用戶的點擊、獲取用戶的位置等。在小程序里邊，可以通過編寫 JS 腳本文件來處理用戶的操作。
詳細請看這里, 事件相關(guān)

界面生命周期

屬性	類型	描述
data	Object	頁面的初始數(shù)據(jù)
onLoad	Function	生命周期回調(diào)—監(jiān)聽頁面加載
onShow	Function	生命周期回調(diào)—監(jiān)聽頁面顯示
onReady	Function	生命周期回調(diào)—監(jiān)聽頁面初次渲染完成
onHide	Function	生命周期回調(diào)—監(jiān)聽頁面隱藏
onUnload	Function	生命周期回調(diào)—監(jiān)聽頁面卸載
onPullDownRefresh	Function	監(jiān)聽用戶下拉動作
onReachBottom	Function	頁面上拉觸底事件的處理函數(shù)
onShareAppMessage	Function	用戶點擊右上角轉(zhuǎn)發(fā)
onPageScroll	Function	頁面滾動觸發(fā)事件的處理函數(shù)
onResize	Function	頁面尺寸改變時觸發(fā)，詳見響應(yīng)顯示區(qū)域變化
onTabItemTap	Function	當前是 tab 頁時，點擊 tab 時觸發(fā)
其他	Any	開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 `Object` 參數(shù)中，在頁面的函數(shù)中用 `this` 可以訪問

五. 其他

支持的運算: 基本運算(+ - * / %), 位運算(& ^ ! << >> ) , 比較運算 (< > <= >= ), 一元運算, 二元運算, 三目運算等.

詳細可以看這里

支持的語句: if, switch, for, while, do ... while;

六. 一個列表代碼示例

屏幕快照 2018-11-20 上午12.53.52.png

test.js

var app = getApp()
Page({
  data: {
    userInfo: {},
    userListInfo: [{
      text: '我的訂單',
      isunread: true,
      unreadNum: 2,
      icon: '../resource/jiantou.png',
      des: '夏天很暖111111111111'
    }, {
      text: '我的代金券',
      isunread: false,
      unreadNum: 2,
      des: '夏天很暖2222222222222'
    }, {
      text: '我的拼團',
      isunread: true,
      unreadNum: 1,
      des: '夏天很暖33333333'
    }, {
      text: '收貨地址管理',
      isunread: true,
        unreadNum: 2
    }, {
      text: '聯(lián)系客服',
      isunread: true,
        unreadNum: 2
    }, {
      text: '常見問題',
      isunread: true,
        unreadNum: 2
      }, {
        text: '收貨地址管理',
        isunread: true,
        unreadNum: 2
      }, {
        text: '聯(lián)系客服',
        isunread: true,
        unreadNum: 2
      }, {
        text: '常見問題',
        isunread: true,
        unreadNum: 2
      }, {
        text: '收貨地址管理',
        isunread: true,
        unreadNum: 2
      }, {
        text: '聯(lián)系客服',
        isunread: true,
        unreadNum: 2
      }, {
        text: '常見問題',
        isunread: true,
        unreadNum: 2
      }
    ]
  }
})

test.wxml

<block wx:for="{{userListInfo}}" wx:for-item="item" wx:for-index="index">
    <view class="ui_cell">

        <view class="ui_cell_bd">
            <view class="ui_cell_bd_p"> {{item.text}} </view>
      <view class="ui_cell_title"> {{item.des}} </view>
        </view>
    
        <view wx:if="{{item.isunread}}" class="badge">{{item.unreadNum}}      </view>

        <view class="with_arrow">
      <image style="width: 20px; height: 15px"src="../resource/jiantou.png"></image>
    </view>

    </view>
</block>

test.wxss

/* 

*** position: 屬性規(guī)定元素的定位類型
*absolute: 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
*fixed: 生成絕對定位的元素，相對于瀏覽器窗口進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
*relative: 生成相對定位的元素，相對于其正常位置進行定位。
因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。

*** display: 屬性規(guī)定元素應(yīng)該生成的框的類型 * * *http://www.w3school.com.cn/cssref/pr_class_display.asp
*
*/

/*
** padding: 簡寫屬性在一個聲明中設(shè)置所有內(nèi)邊距屬性
* padding:10px 5px 15px 20px; 上右下左
* padding:10px 5px 15px; 上右下
* padding:10px 5px; 上下10 左右5
* padding:10px; 四邊
*/

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 160px;
}

.btn {
  width: 200px;
  height: 40px;
  background-color: cyan;
}

.clickBtn {
  width: 400rpx;
  height: 100rpx;
  background-color: yellow;
}

Demo鏈接 https://github.com/summerxx27/WXApplet

調(diào)試工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/debug.html#調(diào)試工具

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

微信小程序入門(一)

微信小程序入門(一)

一. 微信小程序賬號申請

二. 登錄

三. 開發(fā)工具

四. 文件解析

五. 其他

六. 一個列表代碼示例

test.js

test.wxml

test.wxss

調(diào)試工具

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

微信小程序入門(一)

一. 微信小程序賬號申請

二. 登錄

三. 開發(fā)工具

四. 文件解析

五. 其他

六. 一個列表代碼示例

test.js

test.wxml

test.wxss

調(diào)試工具

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av