从零入门系列《二》手动创建目录结构

2017-01-04

需求: 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文件中没有加载入口文件。




0
收藏