微信小程序基础

2020-02-20 18:58:50 阅读：247 来源： 互联网

标签：微信程序 json tabbar 基础 images pages 页面

1.准备工作

登陆微信公众平台注册账号获取appID（这步很简单，不多说）下载微信开发者工具基本使用不多介绍

2.微信小程序项目结构

.json为配置文件里面不能写注释而且里面用双引号不能用单引号（ json格式）
.wxml 为模板文件，相当于HTML模板
.wxss 为样式文件，相当于HTML的CSS样式表
.js 为JS 脚本逻辑文件，相当于HTML的js脚本

project.config.json 为配置文件一般不需要去更改它。在“微信开发者工具”上做的任何配置都会写入到这个文件。

文件必填作用
app.js 是小程序逻辑
app.json 是小程序公共配置作用：对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
app.wxss 否小程序公共样式表 utils是公共的js函数文件，通过module.exports的方式暴露pages下的每个页面使用
不需要每个页面编写重复的Js代码。

3.微信小程序项目配置

全局配置（pages window tabBar debug）

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html 官方全局配置链接

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

{
  "pages": [
    "pages/index/index",
    "pages/course/course",
    "pages/weibo/weibo",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#ccc",
    "navigationBarTitleText": "知了课堂",
    "navigationBarTextStyle": "black",
    "navigationStyle": "default",
    "backgroundColor": "pink",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#8a8a8a",
    "selectedColor": "#1AAD16",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "position": "top",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "微信",
        "iconPath": "images/tabbar/tabbar1.png",
        "selectedIconPath": "images/tabbar/tabbar1_selected.png"
      },
      {
        "pagePath": "pages/course/course",
        "text": "通讯录",
        "iconPath": "images/tabbar/tabbar2.png",
        "selectedIconPath": "images/tabbar/tabbar2_selected.png"
      },
      {
        "pagePath": "pages/weibo/weibo",
        "text": "发现",
        "iconPath": "images/tabbar/tabbar3.png",
        "selectedIconPath": "images/tabbar/tabbar3_selected.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "我",
        "iconPath": "images/tabbar/tabbar4.png",
        "selectedIconPath": "images/tabbar/tabbar4_selected.png"
      }
    ]
  },
  "debug": false
}

页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象。

sitemap 配置

微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。

标签：微信,程序,json,tabbar,基础,images,pages,页面
来源： https://www.cnblogs.com/chenglianjie/p/12329034.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序基础

全局配置（pages window tabBar debug）

sitemap 配置