从零开始 | 原生微信小程序开发（一）

! 一步一步从最基础的开始搭建项目

** 粗略地认识底层原理

** 学会全局配置以及页面局部配置

** 要学会独自查阅文档

下载步骤

注册 AppID

1. 微信小程序

• 里面有开发文档，用来指引学习
• 完成账号注册，选择对应类型（个人）

• 

1. 点击此处，可以查看AppID

• 

下载微信开发者工具

• 最好下载稳定版

开发

可在微信小程序中开发 也可以在vsCode中开发

（目前跟着学习的是在微信小程序中）

目录结构

pages

• 入口文件夹
• index
• logs：暂时不需要用到 （可删除）
• 在这里新建文件夹后，再右键 新建Page 会生成四个必要的文件，同时在app.json中会自动注册组件

utils

• 里面有一些工具

app.json

• " pages "：所有页面都必须在pages中进行注册，在这里添加注册保存，pages中也会生成对应文件；里面的第一个路径即是首先显示的页面
• 不支持注释
• " window "：在这里配置页面文字或者背景的颜色

app.wxss

• 配置整体的样式

配置文件

开始

1. 阅读官方文档

• 学会查阅文档，前面四个部分较为重要

1. MVVM架构

• 

• 

  （对比：vue的架构）
• 好处：

• MVVM架构将我们从 命令式编程 转移到 声明式编程

双线程模型

• 小程序基于WebView环境下，若在同一线程，执行过多的js逻辑可能阻塞渲染，导致界面卡顿
• 采用 双线程模型 的架构：

1. 一些简单的数据绑定（在app.js文件中写）

• 可以看到循环绑定的方式与vue中不一样，在小程序中一旦要引用变量，必须要{{}}，默认的有 item 和index

1. 对全局的简单配置（在app.json文件中配置）

• 所有属性均可在文档中查找

  // 这里配置的是小程序顶部
  "window": {
      "backgroundTextStyle": "dark",
      "navigationBarBackgroundColor": "#006eb0",
      "navigationBarTitleText": "摔倒检测",
      "navigationBarTextStyle": "white"
    }

  // 这里配置的是小程序底部
  "tabBar": {
      "selectedColor": "#006eb0",
      "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/tarbar/home.png",
        "selectedIconPath": "assets/tarbar/home.png"
      },{
        "pagePath": "pages/favor/favor",
        "text": "历史检测",
        "iconPath": "assets/tarbar/history.png",
        "selectedIconPath": "assets/tarbar/history.png"
      }
    ]
    }

• 效果图：

   ​​​​​​​

• 
• 像在官方文档中，很清晰的列出来属性对应的样式

 

1. 单独配置（在对应文件夹中的json文件中）

• 在文档中可查到配置的属性有多种，可以在json配置滚动到底部的距离（加载新数据），在js中调用函数写事件，具体案例回头查看。
• 控制台中AppData可以用来查看页面数据