【小程序入门】小程序基础知识要点

1.页面跳转路由分三种，wx.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。wx.navigateBack()：关闭当前页面，回退前一页面。如果需要在跳转中传递数据，则需将要传递的数据保存到url中，形如url跳转传递数据，以navigateTo为例：

wx.navigateTo({
   url: 'path?id=1&key=2'
})

Page({
    //获取数据
    onLoad: function(options){
      console.log(options)
    }
})

2.app.json文件中有关底部导航栏部分大致如下

 "tabBar": {
    "color": "#999",
    "selectedColor": "#00b9ef",
    "backgroundColor": "#fefefe",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/main_radio_btn_home_image.png",
        "selectedIconPath": "/images/main_radio_btn_home_image2.png"
      },
      {
        "pagePath": "pages/index/business-hall/business-hall",
        "text": "营业厅",
        "iconPath": "/images/main_radio_btn_business_hall_image.png",
        "selectedIconPath": "/images/main_radio_btn_business_hall_image2.png"
      },
      {
        "pagePath": "pages/index/repair/repair",
        "text": "报修",
        "iconPath": "/images/main_radio_btn_repair_image.png",
        "selectedIconPath": "/images/main_radio_btn_repair_image2.png"
      },
      {
        "pagePath": "pages/index/my/my",
        "text": "我的",
        "iconPath": "/images/main_radio_btn_myself_image.png",
        "selectedIconPath": "/images/main_radio_btn_myself_image2.png"
      }
    ]
  },

其中：

「Color」是底部字体颜色，「selectedColor」是切换到该页面高亮颜色，「borderStyle」是切换菜单上面的一条线的颜色，「backgroundColor」是底部菜单栏背景颜色。文字描述较为抽象，建议你一一调试并查看其效果，加深印象。
「“list”」下的代码顺序必须依次放置，不能随便更改。
「”pagePath”」之后的文件名内，「.wxml」后缀被隐藏起来了，这是微信开发代码中人性化的一点——帮你节约写代码的时间，无须频繁声明文件后缀。
「”iconPath”」为未获得显示页面的图标路径，这两个路径可以直接是网络图标。
「”selectedIconPath”」为当前显示页面高亮图标路径，可以去掉，去掉之后会默认显示为「”iconPath”」的图标。
「”Text”」为页面标题，也可以去掉，去掉之后纯显示图标，如只去掉其中一个，该位置会被占用。

3.每个小程序默认的都会有app.js文件，在这个文件可以定义全局变量，定义之后可以在每个页面进行访问。小程序脚本的作用域同 NodeJS 更为相似，不同文件中可以声明相同名字的变量和函数，不会互相影响。通过使用全局函数 getApp() 获取全局的实例，并设置相关属性值，来达到设置全局变量的目的。

// a.js 设置全局变量
var global = getApp()
global.globalValue = 'globalValue'

// b.js访问全局变量
var global = getApp()
console.log(global.globalValue) // 输出 globalValue

4.wx.setStorage（）可以将数据存储到本地缓存中，该方法会覆盖掉原来存储的内容。通过wx.getStorage（）可以从本地缓存中异步获取指定 key 对应的内容。

wx.setStorage({
  key:"key",
  data:"value"
})

wx.getStorage({
  key: 'key',
  success: function(res) {
      console.log(res.data)
  } 
})

5.小程序的自定义分享的功能

示例代码：
Page({
  onShareAppMessage: function () {
    return {
      title: '自定义分享标题',
      desc: '自定义分享描述',
      path: '/page/index?id=123'
    }
  }
})

7.小程序的代码包可以被划分为“主包”和“分包”，这样可以显著降低初始启动时的下载时间。这里示例如下：

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

习明然

发布了120 篇原创文章 · 获赞 50 · 访问量 15万+

私信关注

【小程序入门】小程序基础知识要点

猜你喜欢