“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 15 天，点击查看活动详情”

1.微信开发者工具的设置

1.扫码登录一下

2.设置微信开发者外观和代理

代理选择不适用任何代理，勾选后直连网络：

2.创建小程序项目

1.点击加号创建小程序

2.填写好项目名称，开发模式选择小程序，不使用云服务

3.在模拟器上查看项目效果

点击上面导航栏上的编译即可。

4.在真机上预览项目效果

点击导航栏上的预览，会出现二维码，用手机扫描即可。

5.主页面的5个组成部分

• 菜单栏
• 工具栏
• 模拟器
• 代码编辑区
• 调试区

帮助---开发者文档

设置---通用设置

工具---构建npm

点击上方工具栏上的三个绿色框，可以对实现隐藏和显示

编译---可以对模拟器进行刷新

预览---可以在真机上进行模拟查看

详情---可以看到项目的相关信息

模拟器机型，比例大小以及字体大小设置

代码编写的区域

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

/*
 * Eslint config file
 * Documentation: https://eslint.org/docs/user-guide/configuring/
 * Install the Eslint extension before using this feature.
 */
module.exports = {
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  ecmaFeatures: {
    modules: true,
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  globals: {
    wx: true,
    App: true,
    Page: true,
    getCurrentPages: true,
    getApp: true,
    Component: true,
    requirePlugin: true,
    requireMiniProgram: true,
  },
  // extends: 'eslint:recommended',
  rules: {},
}

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 15 天，点击查看活动详情”