微信小程序基础知识——第一天

现在小程序越来越火,各大平台都有自己的小程序。微信小程序、支付宝小程序、头条小程序、抖音小程序、百度小程序等。现在我们来看下微信小程序是怎样开发的。
第一步:熟悉小程序项目文件目录,
1、app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释

2、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

3、微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页

4、app.js 主要是全局公共的js方法声明及调用所在的文件

5、app.json 是小程序整个的配置文件,所有页面都在此注册,不然不能访问。会报错

6、app.wxss 是全局的css文件, 公共css写在该文件中

7、 .wxml后缀的文件是页面结构文件

8、 微信小程序是微信全新定义的规范,是基于xml+js的。不支持也不兼容HTML

image.png

第二步:熟悉app.json项目配置,底部tabbar、页面路径,项目标题,导航,字体颜色等。

"window": {
          "backgroundTextStyle" : "#000"             //下拉背景字体,loading图的样式
      "navigationBarBackgroundColor" : "red"    //导航标题背景色                
      "navigationBarTitleText": "标题",         //导航标题内容
      "navigationBarTextStyle": "#fff"         //导航标题字体颜色
      enablePullDownRefresh : false / true     //是否开启下拉刷新
  },
"tabBar": {
    "color": "#999999", //底部导航字体颜色
    "selectedColor": "#f3c04b",//底部导航选中字体颜色  
    "borderStyle": "#dcdcdc" ,   //底部导航上边线颜色
    "backgroundColor": "#f6f6f6", //底部导航背景色
    "list": [
      {
        "pagePath": "pages/home/index", //页面路径
        "iconPath": "image/tabbar/icon-1.png",//默认图标
        "selectedIconPath": "image/tabbar/icon-1-1.png",//选中当前图标
        "text": "首页"//tabbar标题
      },
      {
        "pagePath": "pages/sort/index",
        "iconPath": "image/tabbar/icon-2.png",
        "selectedIconPath": "image/tabbar/icon-2-1.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/order/index",
        "iconPath": "image/tabbar/icon-2.png",
        "selectedIconPath": "image/tabbar/icon-2-1.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/my/index",
        "iconPath": "image/tabbar/icon-3.png",
        "selectedIconPath": "image/tabbar/icon-3-1.png",
        "text": "我的"
      }
    ]
  },

第三步:小程序路由

wx.switchTab  跳转到tabBar页面,并关闭其他所有非tabBar页面

wx.reLaunch   关闭所有页面,打开到应用内的某个页面

wx.redirectTo   关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到tabbar页面

wx.navigateTo   保留当前页面,跳转到应用内的某个页面,但是不能跳转tabbar页面。

wx.navigateBack   关闭当前页面,返回上一页面或多级页面。

<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release" class="nav"></navigator>// 跳转到新的小程序

注意事项:
1、背景图片不识别,解决办法:把图片上传至服务器,把地址写在背景路径,或者把图标转换

2、底部导航栏 tabBar底部导航栏 tabBar是一个数组,只能配置最少2个、最多5个tab

3、小程序中不能和字节操作Window对象,document文档。小程序中不能和字节操作Window对象,document文档。

4、小程序脚本逻辑实在JsCore中运行,JsCore是一个没有窗口的对象环境,所以不能再脚本中使用window、zepto、jQuery。

5、样式表不支持级联选择器, WXSS支持以 . 开始的类选择器

6、tabBar的页面用switchTab进行调整, tabBar的页面用switchTab进行调整, 没有tabBar的页面用navigateTo进行调整

第一天的知识就到这了,有不明白的可以留言。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,110评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,443评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,474评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,881评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,902评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,698评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,418评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,332评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,796评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,968评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,110评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,792评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,455评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,003评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,130评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,348评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,047评论 2 355

推荐阅读更多精彩内容