微信小程序的安装和配置

牛马小龙
本文介绍了微信小程序的安装和配置相关内容,对大家解决问题具有一定的参考价值,需要的朋友们一起学习吧!

(一) 开发工具

小程序开发工具下载地址:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

(二) 构建项目

  1. 可以新建,也可以导入原有项目
  2. 需要去注册一个小程序以获得AppId, 当然也可以使用测试号

(三) 小程序配置

3.1 app.json全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

3.2 app.json 配置文件详解

{
  // 页面路径
  "pages": [
    "pages/index/index",
    "pages/cart/cart",
    "pages/detail/detail",
    "pages/my/my",
    "pages/demo/demo"
  ],
   // 导航栏配置
  "window": {
    // 导航栏颜色
    "navigationBarBackgroundColor": "#f8f8f8",
      // 导航栏文字
    "navigationBarTitleText": "花间",
      // 导航文字样式
    "navigationBarTextStyle": "black",
      // 背景文字样式
    "backgroundTextStyle": "dark",
      // 背景颜色
    "backgroundColor": "#f8f8f8"
  },
    // 底部tab栏
  "tabBar": {
     // tab文字和图片默认颜色
    "color": "#797d82",
    // 选中的tab的字体和图片颜色
    "selectedColor": "#c03131",
    
      // tab列表配置
    "list": [
      {
         // tab图片地址
        "iconPath": "./img/home.png",
        // tab被选中时的图片地址
        "selectedIconPath": "./img/homeing.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      }, 
      {
        "iconPath": "./img/cart.png",
        "selectedIconPath": "./img/carting.png",
        "pagePath": "pages/cart/cart",
        "text": "购物车"
      },
      {
        "iconPath": "./img/my.png",
        "selectedIconPath": "./img/mying.png",
        "pagePath": "pages/my/my",
        "text": "个人中心"
      },
      {
        "iconPath": "./img/my.png",
        "selectedIconPath": "./img/mying.png",
        "pagePath": "pages/demo/demo",
        "text": "demo"
      }
    ]
  },
    // 使用的组件放在这里
  "usingComponents": { 
   
  },
  "sitemapLocation": "sitemap.json"
}

3.3 详情配置#

  1. 基本信息配置
  2. 本地配置

(四) 小程序控制台配置

登录小程序: 微信公众平台

4.1 版本管理#

  1. 上传代码获得体验版, 体验版需要添加权限才可以访问
  2. 体验版转正式版
  3. 腾讯审核通过后就变正式版, 所有人都可以访问

4.2 成员管理#

4.3 开发管理#

  1. 开发者id和密钥
  2. 服务器域名配置

(五) 小程序使用nodejs模块

  1. 初始化package.json npm init
  2. npm i 安装依赖
  3. 构建项目

该文章版权属于牛马小龙
摘录自:https://blog.csdn.net/m0_65769258/article/details/123069575

这篇关于微信小程序的安装和配置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!