您当前的位置: 首页 > 知识百科 > 微信小程序示例怎么用?

微信小程序示例怎么用?

时间:2023-07-01 14:05 阅读数:93 人阅读 分类:知识百科

  微信小程序示例怎么用?微信小程序示例,很多用户肯定想要知道微信小程序示例怎么用?找了很多地方也找不到,那来微素达就对啦,赶快来和小编一起看看小编特意收集整理的微信小程序示例怎么用?希望能帮到你。

  创建快捷项目

  app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。

  app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释 。

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

  App({

  onLaunch: function () {

  //调用API从本地缓存中获取数据

  var logs = wx.getStorageSync('logs') || []

  logs.unshift(Date.now())

  wx.setStorageSync('logs', logs)

  },

  getUserInfo:function(cb){

  var that = this

  if(this.globalData.userInfo){

  typeof cb == "function" && cb(this.globalData.userInfo)

  }else{

  //调用登录接口

  wx.login({

  success: function () {

  wx.getUserInfo({

  success: function (res) {

  that.globalData.userInfo = res.userInfo

  typeof cb == "function" && cb(that.globalData.userInfo)

  }

  })

  }

  })

  }

  },

  globalData:{

  userInfo:null

  },

  onShow:function() {

  console.log("show");

  },

  onHide:function() {

  console.log("hide");

  }

  })

  注意 必须在 app.js 中注册App() ,不能注册多个。

  onLaunch :程序初始化执行,且只执行一次。

  onShow :程序启动,或从程序后台进入前台时执行。

  onHide :程序从前台进入后台时执行。

  可以添加任意函数到OBJECT中,使用this访问。

  底部导航

  添加images目录,放入图片资源并添加主程序页面

  


  添加底部导航tabBar

  {

  "pages":[

  "pages/index/index",

  "pages/logs/logs",

  "pages/main/main"

  ],

  "window":{

  "backgroundTextStyle":"light",

  "navigationBarBackgroundColor": "#dddddd",

  "navigationBarTitleText": "WeChat",

  "navigationBarTextStyle":"black"

  },

  "tabBar":{

  "color":"#000",

  "selectedColor":"#48c33c",

  "borderStyle":"block",

  "backgroundColor":"#ffffff",

  "list":[{

  "pagePath":"pages/index/index",

  "iconPath":"images/footer/index.png",

  "selectedIconPath":"images/footer/indexS.png",

  "text":"首页"

  },

  {

  "pagePath":"pages/logs/logs",

  "iconPath":"images/footer/logs.png",

  "selectedIconPath":"images/footer/logsS.png",

  "text":"日志"

  },

  {

  "pagePath":"pages/main/main",

  "iconPath":"images/footer/main.png",

  "selectedIconPath":"images/footer/mainS.png",

  "text":"主程序"

  }

  ]

  }

  }

  color :文字默认颜色

  selectedColor :文字选中颜色

  borderStyle :上边框颜色(只支持black/white)

  backgroundColor :背景色

  list :菜单列表

  list属*

  pagePath :页面路径(需要在pages中初始化)

  iconPath :图片路径,大小限制40kb

  selectedIconPath :选中样式图片路径,大小限制40kb

  text :按钮文字

  数据绑定

  这就是微信小程序示例怎么用?的内容,希望可以帮到大家,更多精彩关于微信小程序的文章,请继续关注微信素材网。

  更多文章推荐:

  微信小程序市场分析:微信小程序如何创业?

  微信小程序怎么注册? 怎么用微信小程序赚钱?

  怎样用微信小程序赚钱背后隐藏着什么?