微信小程序开发事项1、注册微信小程序 2、通过微信扫码登录微信小程序 3、获取小程序相关的AppID、App

整备工作

1、注册微信小程序

2、通过微信扫码登录微信小程序

3、获取小程序相关的AppID、AppSecret

4、下载安装微信开发工具

5、登录微信开发者工具

6、登录小程序

小程序文件架构

一、主体文件

1、 app.js :小程序主体文件，变更影响全局

2、 app.json: 小程序全局配置文件

3、 app.wxss: 小程序样式文件

4、所有创建好的文件度需要再app.json中配置page配置，详细参考官方全局配置文档

{
  "entryPagePath": "pages/index/index", //默认首页配置
  "pages": [
    "pages/edit_gif/edit_gif" //挂载页面配置
  ],
  "window": {
    "navigationBarTextStyle": "black", // 窗口样式配置
    "navigationStyle": "custom"
  },
    "tabBar": { // 导航配置
    "list": [{
      "text": "首页", // 标题配置
      "pagePath": "pages/edit_gif/edit_gif", // 路由配置
      "iconPath": "", // 默认图标皮质
      "selectedIconPath": "" // 点击图标配置
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

主体文件必须是app命名，app.js与app.json文件必须在根目录存在

二、页面文件

1、页面文件必须放置在pages目录中

2、一个页面需使用一个文件夹进行承载

3、文件包含四个文件.js：页面逻辑、.wxxml：页面结构、.wxss:页面样式、.json当前页面配置

4、页面文件创建过程先穿件文件、再创建文件名称能直接创建包含四个文件.js：页面逻辑、.wxxml：页面结构、.wxss:页面样式、.json当前页面配置

5、页面.json文件参考页面配置官方文档,页面配置高于全局配置，会覆盖全局配置

页面文件必须有.js、.wxxml、.json三个文件

三、文件含义

1、 page存放页面文件

2、 components存放公共方法

3、 project.config 项目配置项

4、 project.private.config 私人配置

解决渲染问题

1、在全局配置app.json中剔除renderer、rendererOptions、componentFramework

小程序调试工具

1、点击调试器可以看到console(打印日志)、network（网络请求）、appData(自定义数组)、storage(本地存储数据)

2、通过预览与真机上进行调试，开发时及时清理缓存

小程序的配置文件JSON含义

1、 app.json 小程序全局配置文件

2、页面.json 小程序页面配置文件，一般用户配置当前页面窗口样式、标题等

3、 project.config.json 小高层许项目配置文件，保存项目配置信息与开发者的个人设置

注意事项，参考配置官方文档：

1、project.private.config 写到.gitlgnore避免版本冲

2、与最终版本相关文件配置必须配置project.config文件中

{
  "appid": "wx69eb7f24334507f9",
  "compileType": "miniprogram",
  "libVersion": "3.7.7",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "useCompilerPlugins":["sass", "typescript"], //设置语言页面后缀改为.scss与样式代码
    "coverView": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "enhance": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmRelationList": [],
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    }
  },
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}

4、 sitemap.json 配置小程序及页面是否能被微信索引，提高小程序搜索引擎的搜索概率（微信SEO）

    "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
    "rules": [{
    "action": "allow", // allow允许索引、disallow不允许索引
    "page": "*" // 路由
    }]

微信小程序支持语言能力

1、参考组件官方文档

2、任何屏幕的小程序屏幕宽度都为750rpx，能实现自适应

3、 view类型与前端div模块

微信小程序开发事项