微信小程序源码分享,实用小程序源码分享给大家
微信小程序源码分享,实用小程序源码分享给大家。以下是小编收集的一些有用且实用的微信小程序源码哦,小编来把它整理出来分享给大家,有兴趣的微信小程序开发者们,可以来看看哦。
最全微信小程序源码分享:
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 }
})
感谢大家的观看,小编已经把微信小程序源码分享出来了哦,希望以上的微信小程序源码可以帮到大家哦。有需要的亲们就赶快收藏起来吧。微小乔有更多精彩内容等着您老看哦。
怎么修改微信小程序按钮格式
小程序按钮点击样式功能介绍
小程序转发按钮有什么功能?