700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序开发工具的基本应用

微信小程序开发工具的基本应用

时间:2022-02-12 09:14:50

相关推荐

微信小程序开发工具的基本应用

全局配置:

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": "组件"}]}

3.注册程序:app.js

设置相对应的生命周期函数(初始化完成时onLaunch,显示onShow,隐藏onHide,错误的时候onerror) 设置全局数据:globalData属性进行设置,getApp()可获取app.js的配置对象 4.1.导入文件方式:<import src='文件路径'/>

<import src="a.wxml"/><写要导入的具体内容标签>

4.2.将整个文件内容导入并显示方式:<includesrc='文件路径'/> include将页面header.wxml的内容全部导入,相当于将所有内容都复制过来

<include src="header.wxml"/>const openIdUrl = require('./config').openIdUrl

5.小程序应用的生命周期启示 一般还会将全局的数据放置到初始化全局对象的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 openidgetUserOpenId: function(callback) {var self = thisif (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.openidcallback(null, self.globalData.openid)},fail: function(res) {console.log('拉取用户openid失败,将无法正常使用开放接口等服务', res)callback(res)}})},fail: function(err) {console.log('wx.login 接口调用失败,将无法正常使用开放接口等服务', err)callback(err)}})}}})

6.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',})}})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。