应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

微信小程序开发新手实战教程

发布时间:2024-01-01 00:00 浏览次数:25

建立便捷项目


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{


//调用登入USB


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:按钮文字


数据存取


main.js


Page({


data:{


text:"这就是一个页面"


},


onLoad:function(options){


// 页面初始化 options为页面重定向所增添的参数


},


onReady:function(){


// 页面图形顺利完成


},


onShow:function(){


// 页面表明


},


onHide:function(){


// 页面暗藏


},


onUnload:function(){


// 页面停用


}


})


1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20


1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20


main.wxml



{{text}}



1


2


3


1


2


3


view组件


flex-direction: row:纵向排序;column:横向排序


justify-content:flex-start:左对齐; flex-end:右对齐;center:母葛氏;space-between:两端集中对齐;space-around:母葛氏集中对齐


align-items:flex-start:横向顶部;flex-end:横向底部;center:横向母葛氏


轮播













1


2


3


4


5


6


7


8


9


10


11


1


2


3


4


5


6


7


8


9


10


11


属性名 类型 默认值 表明


indicator-dots Boolean false 与否表明面板命令点


autoplay Boolean false 与否自动转换


current Number 0 当前所在页面的 index


interval Number 5000 自动转换时间间隔


duration Number 1000 滑动动画时长


bindchange EventHandle current 发生改变时会引爆 change 事件,event.detail = {current: current}


特别注意:其中只可以置放组件,其他节点可以被自动删掉。


仅可以置放在组件中,收录机自动设置为100%。


以获取轮播发生改变事件


listenSwiper:function(e) {


console.log(e)


},


1


2


3


1


2


3



Object {target: Object, currentTarget: Object, type: "change", timeStamp: 35345, detail: Object}


currentTarget


:


Object


detail


:


Object


target


:


Object


timeStamp


:


35345


type


:


"change"


__proto__


:


Object


1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


图标 icon


type 有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear


size 预设23px


color 同css的color




























进度条


percent Float 并无 百分比0~100


show-info Boolean false 在进度条右侧表明百分比


stroke-width Number 6 进度条线的宽度,单位px


color Color #09BB07 进度条颜色


active Boolean false 进度条从左往右的动画



按钮 button






备注:button-hover 预设为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}


按钮页面事件


clickButton: function(e) {


console.log(e);


},


CHECKBOX





{{item.value}}




存取事件


存取数据


items: [


{


name: 'S',


value: 'S',


checked: 'true'


},


{


name: 'O',


value: 'O'


},


{


name: 'N',


value: 'N'


},


{


name: 'G',


value: 'G'


},


{


name: 'SONG',


value: 'SONG'


}


]


存取监听事件


listenCheckboxChange:function(e) {


console.log(e);


},


至此页面


源代码(Git):https://github.com/yz-mengxiangsong/wechatDemo.git

TAG标签:
阅读推荐