微信小程序

最新推荐文章于 2024-08-16 22:10:09 发布

zxf318

最新推荐文章于 2024-08-16 22:10:09 发布

阅读量76

点赞数

分类专栏：笔记文章标签：微信小程序小程序微信

本文链接：https://blog.csdn.net/zxf318/article/details/126520460

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

认识

什么是微信小程序？

简称小程序，是一种不需要下载安装即可使用的应用，可以实现原生app可以实现的效果和功能，能替代一些简单的app应用。

小程序优势：

1.不用安装，省流量，省时间，不占用桌面

2.与原生APP相比综合考虑更优

3.微信用户多，粘性高，

4.易小规模试错，快速迭代，跨平台

5.对拥有者更易推广，省成本。

6.具有线下连接一切使命，（2014年11月马化腾在「世界互联网大会」上提出腾讯要「连接一切」，要成为互联网连接器）

微信小程序拥有自己的标签和HTML5有一定却别，

目录结构

小程序包含一个描述整体程序的app和多个描述各自页面的page。

一个小程序主体分为三个文件组成，必须放在项目的根目录下。app.js(小程序逻辑),app.json(小程序公共配置)，app.wxss(小程序公共样式表)。

一个小程序页面由四个文件组成，js(页面逻辑)，wxml(页面结构)，json(页面配置)，wxss(页面样式表)，同时这四个文件必须有相同的路径和文件名。

utils可删但对应的logs也需删除因logs引用了utils.

代码构成：

json配置：

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON指的是静态配置。

(1)app.json全局配置：包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

{
  "entryPagePath":"pages/goods/goods", //默认启动首页，写了此项pages里第一项不起作用
  //定义小程序页面
  "pages":[
    //第一位方便调试
    //在此直接创建文件且模拟器默认显示（启动项）,微信小程序所以可点路径都需在此配置添加
    "pages/    /   " ,
    "pages/goods/goods"
    "pages/index/index",
    "pages/logs/index",
  ],
  //定义全部页面顶部背景颜色，文字颜色等
  "window":{
    "backgroundTextStyle":"light", //下拉loading样式，仅支持dark /light
    "navigationBarBackgroundColor": "#fff", //导航栏背景颜色
    "navigationBarTitleText": "Weixin", //导航栏标题文字内容
    "navigationBarTextStyle":"black" //导航栏标题颜色，仅支持black/white
  }，
  //定义tabBar  底部导航
  "tabBar": {
  	"color": "#000",				  
  	"selectedColor": "#000",	
  	"backgroundColor": "#f5f5f5",
      //list每个导航的每一项，一项为一个数组，必须两项	
     "list": [{
      //页面路径，必须上面pages定义过的
      "pagePath":"pages/index/index",
      "text": "个人",  //文本
      "iconPath": "./img/个人.png",   //图标地址本地的，未选中
      "selectedIconPath": "./img/个人.png"  //选中
    },{
      "pagePath": "pages/goods/goods",
      "text": "商品",
      "iconPath": "./img/礼物.png",   
      "selectedIconPath": "./img/购物车空 (1).png" 
    }]
  },
 "style": "v2",
 "sitemapLocation": "sitemap.json"
}
page字段:  用于描述当前小程序所有页面路径，为了让微信客户端直到当前你的小程序页面定义在哪个目录。每新增一个页面都需要在page定义。
window字段： 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

eg: