（02）微信小程序开发工具以及第一个小程序

（一）下载微信开发者工具

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

选择自己系统的版本，下载安装即可，没有遇到安装困难

打开下载好的开发工具

 

然后用自己的微信扫码登录

 

登录后就可以查看自己的项目了

打开设置

 

（二）新建小程序

目录选本地目录，项目名称自填，AppID可以用上一节注册好的id，也可以选择测试号

新建完成如下图：小程序练习项目

 

新建小程序的目录如下：

这是一个只有登录页面和日志的小程序

头像处一开始是一个获取头像昵称的按钮，点击获取后，呈上图，点击头像可查看登录日志

（三）小程序代码结构

——pages

                ——index

                ——logs

——utils

——app.js

——app.json

——app.wxss

——project.config.json

——sitemap.json

 

（1）pages

           小程序的页面

           这里有两个页面，一个首页（index）一个日志页面（logs）

           每个页面有四个文件

          .js    .json    .wxml     .wxss

       .wxml对应.html       .wxss对应.css       .json是窗口表现配置文件  .js文件是脚本代码

               每一个小程序页面使用 .json 文件来对本页面的窗口表现进行配置。

              页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。

              配置页面的背景颜色，导航栏样式，窗口样式等。

（2）utils

将一些公共的代码抽离成为一个单独的 js (utils.js)文件，作为一个模块;
       模块只有通过 module.exports 或者 exports 才能对外暴露接口。
       所以当你在util.js里封装的方法想要在外部使用的话,必须通过 module.exports 或者 exports 对外暴露

module.exports = {
               '对外方法名':'本地方法名'
       }

 

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

 

（3）app

             .js .json .wxss  

                      app.json 文件用来对微信小程序进行全局配置。

                      app.wxss文件用来设置全局样式。

（4）project.config.json

              项目配置文件

（5）sitemap.json

            用于配置小程序及其页面是否允许被微信索引

 

          文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；

   该文件的配置项为rules，为必填配置项。

 

其中关于matching值的使用有详细的事例说明：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html

注：{"action": "allow", "page": "*"} 是优先级最低的默认规则，未显式指明 "disallow" 的都默认被索引

（此时文件内容就是这种情况）

 

完～

 

今天记得流水账有点多，在 https://developers.weixin.qq.com/miniprogram/dev/reference/ 中有详细说明，很清楚。

20200102

2020第一记