【临时抱佛脚之大二实习日志】配置js环境，了解微信小程序架构

配置js环境

了解微信小程序的架构

使用微信开发工具编写一个小程序

配置js环境

Nodejs的安装：Nodejs安装教程_彭佼的博客-CSDN博客

在VS Code中调试js文件

新建一个文件，选择语言

输入测试代码

var a = 1;
var b = 2;
console.log("hello world");
console.log("a = ", a);
console.log("b = ", b);

 F5运行选择调试器：

如果报错，则重启电脑

 运行结果如下图：

微信小程序架构

参考：微信小程序的架构

使用微信开发工具编写一个小程序

参考：入门微信小程序开发(一)安装和配置_An丶清风的博客-CSDN博客

当加入AAPID时报错：TypeError: Failed to fetch

重启电脑。

我们想在json文件中加入注释，但报错，参考：微信小程序开发记录3——app.json无法添加注释_app.json注释_Jianzhi.Z的博客-CSDN博客

也就是说，app.json这个文件不能加注释 

运行程序出现404

因为8080端口被占用，以管理员身份打开cmd，然后把端口正在运行的杀掉就ok

修改后结果如图：

 无法访问网站，是因为程序没有运行，等程序运行了以后就会在开发者工具里面呈现。因为网页是html，小程序是wxml（某些开发者工具默认打开html，一旦程序运行，便会打开正常的界面）

逐行分析代码

{

  "pages":[
    //页面数组，数组中有几个元素代表有几个页面
    "pages/index/index",//表示根目录pages下的index文件夹下的index文件
    "pages/logs/logs"//同上
  ],
  "window":{
    "backgroundTextStyle":"light",//下拉刷新字体颜色
    "navigationBarBackgroundColor": "#2CC2C3",//导航背景颜色（只能修改上面）
    "navigationBarTitleText": "Rosediver",//导航标题
    "navigationBarTextStyle":"black"//导航文字颜色
  },
  "style": "v2",//基础组件的升级（可删去）
  "sitemapLocation": "sitemap.json"
//方便推送给用户，如果删去则索引全部页面
}

 效果图如下：（是没有返回键的），如果按代码里来应该是有的

 点击真机调试->二维码真机调试

手机微信扫码后，会弹出一个窗口。作用类似谷歌的开发者工具

 手机界面如图：