小程序基础学习

小程序基础学习

• 开始学习小程序开发，据说和 vue 很像
• 小程序感觉还是需要面向文档开发，里面零零散散的属性很难记得，所以要经常看文档

注册小程序

• 如果需要测试高级的小程序功能就需要用到 APPID

• 获取 APPID：开发 -> 开发设置 -> 开发者ID

• 和 chrome 的调试器一样，可以设置机型，网络状态等条件

• MINA 的意思是原生框架

• 项目结构：
  

• sitemap.json 文件是配置小程序是否允许被微信索引

小程序配置文件

全局配置文件 app.json

• 他大概是这样的：

{
   
   
  // 小程序包含的页数
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
   
   
    // 下拉刷新的小圆点的颜色
    "backgroundTextStyle":"light",
    // 导航栏颜色
    "navigationBarBackgroundColor": "#fff",
    // 导航栏标题
    "navigationBarTitleText": "WeChat",
    // 导航栏文字颜色
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages 字段

• pages 字段是字符数组型的
• pages：整个小程序有多少个页面
• 我们想要新增一个页面文件的话可以直接在 pages 里面新增一行，微信开发者工具 (仅限微信开发者工具) 会自动帮我们准备好文件夹和对应的文件
• pages 数组最前面的页面就是这个小程序的首页

window 字段

• window 字段：对象类型
• window 字段可以定义小程序所有页面的状态栏，导航条，标题，窗口背景颜色

  "window":{
   
   
    // 下拉刷新的小圆点的颜色
    "backgroundTextStyle":"light",
    // 导航栏颜色
    "navigationBarBackgroundColor": "#fff",
    // 导航栏标题
    "navigationBarTitleText": "WeChat",
    // 导航栏文字颜色
    "navigationBarTextStyle":"black"
  },

• 常用的属性：

• navigationBar...：导航栏的各种属性

• 这个位置就是导航栏
  

• navigationBarTextStyle 导航栏的标题颜色只能为黑色 (black) 或者白色 (white)

• enablePullDownRefresh：是否开启全局下拉刷新 (布尔值)

• backgroundColor：背景颜色，但是不是这个页面的背景颜色，是下拉部分的背景颜色

• 剩下的属性需要面向文档编程，需要找文档去看还有哪些需求

tabBar 字段

• 小程序下面的图标栏：

"tabBar": {
   
   
    "list": [{
   
   
      // 页面路径：点击后跳转到哪个小程序页面
      "pagePath": "pagePath",
      // 下面图标的文字
      "text": "text",
      // 图标的路径
      "iconPath": "iconPath",
      // 选中的图标路径
      "selectedIconPath": "selectedIconPath"
    }],
    // 未选中标签的文字颜色
    "color":"#0094ff",
    // 选中时的颜色
    "selectedColor": "#000000"
  },

• 这里的图标可以去 iconfont 下载 (搜索双色图标就可以找到)
• list 里面至少有两个成员，否则会报错
• 注意，tabBar 里面的 color 和 selectedColor 必须要用 16 进制表示颜色
• 如果 tabBar 属性在上面，则图标就不会显示
• 里面还有很多属性，仍然需要看官方文档来学习

页面配置 page.json

• 页面配置指的是页面文件夹中的同名 json 文件