uni-app 快速入門 從零開始實現新聞資訊類跨端應用（更新中）

---

一、微信小程式基礎

1.初始化檔案目錄結構

1、utils資料夾主要存放工具類
   pages目錄存放所有頁面程式碼
   app.js是檔案入口
   app.jasn是專案配置
   app.wxss是全域性樣式表
2、index目錄  
      index.js當前頁面的業務邏輯
      index.json當前頁面的配置檔案
      index.wxml當前頁面模板
      index.wxss當前頁面的樣式

2.資料繫結，條件判斷、列表渲染

index.js

//必須使用Page構造器來構造頁面
Page({
  /**
   * 頁面的初始資料
   */
  data: {
    name:'hzy',
    is_ok:false,
    list:['1','2','3','4']
  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    //改變資料的方法this.setData(obj)
    //this是指當前物件的例項，指向Page
    setTimeout(()=>{this.setData({name:'wwj',is_ok:true})},2000)
  },

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

  },

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

  },

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

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

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

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})

index.wxml

<!--pages/index/index.wxml-->
<text wx:if="{{is_ok}}">{{name}}</text>
<!--text 是行級元素，相當於span-->
<!--wx:if 控制標籤是否渲染-->
<view wx:for="{{list}}">{{item}}</view>
<!--view 是塊級元素，相當於div-->
<!--wx:for 控制標籤迴圈渲染-->
<!--item 是指當前變數預設值
    index 是指當前下標預設值-->
<!--
	<view wx:for="{{list}}" wx:for-item="list">{{list}}</view> 
	等價於
	<view wx:for="{{list}}">{{item}}</view>
-->

二、uni-app基礎

1.uni-app核心知識點概況

1.1 uni-app規範

①頁面檔案遵循Vue單檔案元件（SFC）規範

②元件標籤接近小程式規範

③介面能力（JS API）靠近小程式規範

④資料繫結及事件處理同Vue.js規範
⑤為相容多端執行，建議使用flex佈局進行開發

1.2 uni-app特色

①條件編譯

②App端的Nvue開發法
③HTML5+

1.2 uni-app特色