微信小程序開發(三)-----手動創建目錄結構

*****************************************************************

需求: 1. 屏幕打印紅色字體 你好 ;

        2. 自定義全局應用對象的方法getString, 在index.js頁面實現etString方法

*****************************************************************

本文以這一個例子講解如何手動創建項目目錄結構, 步驟如下:

1. 填寫項目名稱和目錄

注意: 因為要手動創建目錄結構, 所以上圖中不要勾選!!

2.新建目錄

這里就按照官方目錄結構創建, 大家看起來比較方便, 步驟如圖:

 

目錄如下:

3.需求1界面代碼

3.1 app.json界面的代碼如下:

{
    "pages": [
      "pages/index/index"
    ]
}

通過pages來添加要加載頁面的路徑, 注意這里不要寫文件的后綴, 寫在最前邊的路徑就是最先加載的文件

3.2 index.wxml界面代碼如下:

<text>你好</text>

用text標簽來添加文本。 

3.3 index.wxss界面代碼如下:

text{
    color: red;
}

到此需求1已經完成, 運行結果如圖:

 

4.需求2界面代碼

4.1 app.js界面代碼如下:

App({
  onLaunch () {
     console.log('加載')
  },

  //自定義的函數
  getString () {
    console.log('自定義的函數')
  }
})

通過系統函數App來生成一個程序實例, 在其中有常見的生命周期函數, 在這里自定義函數getSting

4.2 index.js界面代碼如下:

//通過getApp方法拿到應用程序對象
const app = getApp()
Page({
 onLoad () {
    const string1 = app.getString()
    console.log(string1) 
 }
})

通過getApp方法拿到應用程序對象,這里對象命名為app, 以此來用app對象獲取getSrting方法, 通過Page函數生成一個頁面實例,
在加載頁面時完成需求2, 運行結果如圖:

5. 注意

其中可能出現的問題如圖:

這說明在app.json文件中沒有加載入口文件。