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

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"
      ]
    }
  ]
}

你可能感兴趣的:(小程序)