微信小程序开发基础知识
全局配置:
1.1配置所有页面路径:在app.json的{pages:[配置所有页面]},将首页放置在第一位,在app.json必须写上所有页面的路径,要不然会报错,每个页面的wxss样式文件只在当前文件里有效
1.2设置tabBar导航:
“tabBar”: {
“color”: “#7A7E83”,//字体颜色
“selectedColor”: “#3cc51f”,//选中时候字体的颜色
“borderStyle”: “black”,//tabbar边框的颜色,只有黑和白
“backgroundColor”: “#fff”,//背景颜色
“list”: [//2-5,只能设置2-5个导航
{
“pagePath”: “page/newPage/index”,//导航页面路径,根据路径匹配tarbar导航是否显示
“iconPath”: “image/icon_component.png”,//图标图片的路径
“selectedIconPath”: “image/icon_component_HL.png”,//选中的时候图片的路径
“text”: “首页”//按钮文本
},
{
“pagePath”: “page/component/index”,
“iconPath”: “image/icon_component.png”,
“selectedIconPath”: “image/icon_component_HL.png”,
“text”: “组件”
}
]
}
2.window:窗口样式的配置
3.注册程序:app.js
设置相对应的生命周期函数(初始化完成时onLaunch,显示onShow,隐藏onHide,错误的时候onerror)
设置全局数据:globalData属性进行设置,getApp()可获取app.js的配置对象
4.1.导入文件方式:
<写要导入的具体内容标签>
4.2.将整个文件内容导入并显示方式:
include将页面header.wxml的内容全部导入,相当于将所有内容都复制过来
const openIdUrl = require(‘./config’).openIdUrl
//小程序应用的生命周期启示
//一般还会将全局的数据放置到初始化全局对象的globalData这个对像上
App({
onLaunch: function () {
console.log(‘App Launch’)
},
//小程序显示的时候(启动/后台切换到前台的时候启动)
onShow: function () {
console.log(‘App Show’)
},
//切换至后台,切换到其他微信页面,切换到其他程序,就会调用起这个函数
onHide: function () {
console.log(‘App Hide’)
},
globalData: {
hasLogin: true,
openid: null
},
// lazy loading openid
getUserOpenId: function(callback) {
var self = this
if (self.globalData.openid) { callback(null, self.globalData.openid) } else { wx.login({ success: function(data) { wx.request({ url: openIdUrl, data: { code: data.code }, success: function(res) { console.log('拉取openid成功', res) self.globalData.openid = res.data.openid callback(null, self.globalData.openid) }, fail: function(res) { console.log('拉取用户openid失败,将无法正常使用开放接口等服务', res) callback(res) } })}, fail: function(err) { console.log('wx.login 接口调用失败,将无法正常使用开放接口等服务', err) callback(err) } })}
}
})
5。index.js:存储数据和方法(index.wxml视图页面元素相当于html)index.json表示当前页面的配置
Page({//表示当前文件下的page全局的page对象,所有的方法和数据
/**
* 页面的初始数据
*/
data: {
msg:’这是data里的数据’,
helloMsg: ‘helloWorld’,
obj:{
helloMsg:’欢迎词’,
otherText:’其他信息’
},
},
changeMsg:function(){
this.setData({
msg:’这是改变后的内容’,
})
},
clicktap:function(e){
console.log(e)
},
/**
* 生命周期函数–监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数–监听页面初次渲染完成
*/
onReady: function () {
var appConfig = getApp()//getApp()是获取全局变量globalData方法下的数据的函数方法
console.log(appConfig)
if(appConfig.globalData.hasLogin){
this.setData({
msg:’已登陆完成’
})
}else{
this.setData({
msg:’还未登陆,请登录’
})
}
},
/**
* 生命周期函数–监听页面显示
*/
onShow: function () {
var pageList = getCurrentPages()
console.log(pageList)
},
/**
* 生命周期函数–监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数–监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
goPage(){
// wx.navigateTo({
// url: ‘/page/component/pages/button/button’,
// })
wx.redirectTo({
url: ‘/page/component/pages/button/button’,
})
}
})
- 微信小程序开发系列——4.小程序视图页面基础知识
- 微信小程序开发基础知识总结
- iso-开发基础知识-1-程序流程
- 微信小程序-开发经验总结---(基础重点)
- 面向对象的程序开发过程和所需的基础知识
- 微信小程序开发教程(基础篇)8-数据绑定下
- 【微信开发】基础知识
- 微信小程序开发—(七)canvas基础
- 微信小程序开发-从基础到实战(一)
- 微信小程序开发(基础)
- 微信小程序开发入门基础
- ABAP开发基础知识:1) ABAP基础程序类型(ABAP Elementary Data Types)
- 微信小程序开发系列:配置(基础部分)
- 微信小程序开发入门基础
- 微信小程序开发-从基础到实战(二)
- EA&UML日拱一卒-0基础学习微信小程序(4)- 安装开发工具
- 微信小程序开发——基础目录、欢迎页面的创建(电影小程序)
- DSP/BIOS 程序开发二 基础知识
- 微信小程序开发教程(基础篇)3-app.js 解析
- 微信小程序 基础知识css样式media标签