微信小程序day01_05之 手写属于自己的第一个小程序demo

本文代码已经全部上传至码云,可供学习参考,欢迎start
https://gitee.com/jaythc/wxxcx_learen/tree/master/day01/day01_05/my-first-demo

一. 创建demo项目

新建一个项目,取名为my-first-demo

创建项目后, 自动生成的文件如下.

删除logs文件夹和utils文件夹
删除index.wxss 样式文件

二. app.json文件的解读

在app.json中, 有如下的两个对象, 分别为 pages 和windows

{ 
  "pages":[
    "pages/imooc/imooctest",
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

1. pages

pages 对象为配置的所有的页面. 所有需要展示的页面,得在app.json中进行配置,才能显示.
用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
例如下图微信官方小程序示例中, 有配置了如下的这些页面, 内容过多未截取完整.

其中以"page/component/pages/ad/ad"为例讲解
page目录下的component文件夹下的pages文件夹下的ad文件夹下的所有以ad开头的文件.

在app.json中做一个测试. 添加如下的一段, 并放置在pages对象的第一行, 代表打开小程序就加载的页面.
而其他的页面,需要进行触发才能加载.
"pages/imooc/imooctest"
复制indez文件,改名为imooc文件夹, 修改其中的imooctest.wxml, 添加内容为 这是我的test页面

显示的效果如下 . 说明成功加载了修改的页面

2. window对象

window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
用于设置小程序的状态栏、导航条、标题、窗口背景色。
在小程序的开发文档中, 全局配置的章节, 有对此的对象中的属性的设置
https://developers.weixin.qq.com/miniprogram/dev/framework/config.htm
如下图所示

3.tabBar

tabBar 为 底部 tab 栏的表现.
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
例如在app.json 中添加如下的代码

 "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/imooc/imooctest",
        "text": "imooc"
      }
    ]
  }

可以看到在底部有切换栏, 进行不同应用的切换.

4. networkTimeout

networkTimeout为各类网络请求的超时时间，单位均为毫秒。
都不是必填的, 有默认值设置一分钟为超时

5. debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。
在app.json中添加如下:

三. 数据绑定

在index.wxml 中编写如下的代码. 其中{{mytext}} 采取数据绑定的方式获取数据

<!--index.wxml-->
<!--view 可以理解为一个div span -->
<!--class container 为引用的样式文件, 对应了.wxss中的container -->
<view class="container">
    <text>{{mytext}}</text>
</view>

在index.js中, Page对象中,定义了data对象,用于数据绑定, 定义了mytext属性, 用于对应wxml中的内容. 其值为"第一个demo"

//index.js
//获取应用实例
// Page对象是一定要有的
Page({
  // data为数据绑定
  data: {
    mytext: '第一个demo'
  }
})

编译后, 切换到index,wxml页面, 可以看到显示的内容为"第一个demo"

四. 私有样式

新建立index.wxss文件, 内容如下

.txt-css {
  margin-top: 200rpx;
}

在wxml中进行引用, 使用class 属性, 值为自定义的样式名称即可.

<view class="container">
    <text class='txt-css'>{{mytext}}</text>
</view>