您当前的位置: 首页 > 知识百科 > 微信小程序源码分享,实用小程序源码分享给大家

微信小程序源码分享,实用小程序源码分享给大家

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

  微信小程序源码分享,实用小程序源码分享给大家。以下是小编收集的一些有用且实用的微信小程序源码哦,小编来把它整理出来分享给大家,有兴趣的微信小程序开发者们,可以来看看哦。

  最全微信小程序源码分享:

  1、微信小程序基本架构源码

  以下就是程序的基本架构。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,json后缀的文件是配置文件,wxss后缀的是样式表文件。底部标签底部标签是一个tabBar。实现比较简单,只需要简单配置一下即可。

app.json

  {

  "pages":[

  "pages/function/function",

  "pages/pay/pay",

  "pages/account/account",

  "pages/index/index",

  "pages/logs/logs"

  ],

  "tabBar":{

  "color": "#464a56",

  "selectedColor": "#6595e9",

  "backgroundColor": "#FFFFFF",

  "borderStyle": "white",

  "list": [{

  "pagePath": "pages/function/function",

  "text": "功能",

  "iconPath": "images/tab_function_default.png",

  "selectedIconPath": "images/tab_function_sel.png"

  },{

  "pagePath": "pages/pay/pay",

  "text": "收款",

  "iconPath": "images/tab_consume_default.png",

  "selectedIconPath": "images/tab_consume_sel.png"

  },{

  "pagePath": "pages/account/account",

  "text": "账户",

  "iconPath": "images/tab_account_default.png",

  "selectedIconPath": "images/tab_account_sel.png"

  }]

  },

  "window":{

  "navigationBarBackgroundColor": "#6595e9",

  "navigationBarTextStyle":"white",

  "navigationBarTitleText": "V50",

  "backgroundColor": "#eeeeee",

  "backgroundTextStyle":"light"

  }

  }

  2、微信小程序轮播图实现源码

  接下来实现顶部的轮播图。微信提供了一个swiper组件来实现轮播图。

  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

  function.js

  //function.js

  Page({

  data: {

  indicatorDots: true,

  autoplay: true,

  interval: 5000,

  duration: 1000,

  imgUrls: [

  'img02.tooopen/images/20150928/tooopen_sy_143912755726.jpg',

  'img06.tooopen/images/20160818/tooopen_sy_175866434296.jpg',

  'img06.tooopen/images/20160818/tooopen_sy_175833047715.jpg'

  ],

  },

  })

  3、微信小程序示例创建源码

  //app.js

  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 }

  })

  感谢大家的观看,小编已经把微信小程序源码分享出来了哦,希望以上的微信小程序源码可以帮到大家哦。有需要的亲们就赶快收藏起来吧。微小乔有更多精彩内容等着您老看哦。

  怎么修改微信小程序按钮格式

  小程序按钮点击样式功能介绍

  小程序转发按钮有什么功能?