微信小程序开发工具的基本应用
全局配置:
"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
<import src="a.wxml"/> <写要导入的具体内容标签>
<include src="header.wxml"/> const openIdUrl = require('./config').openIdUrl
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)
}
})
}
}
})
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',
})
}
})
微信小程序开发工具的基本应用的更多相关文章
- 微信小程序开发工具测评
1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...
- 微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?
原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者:如有疑问,请在评论内回复 ...
- 微信小程序开发工具使用与设计规范(二)
[未经作者本人同意,请勿以任何形式转载] 上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 ...
- 微信小程序开发工具中快捷键
微信小程序开发工具表面上是没有更多的样式类的工具,例如缩进.隐藏代码什么的. 现在总结一下小程序开发工具常用的一些快捷键: 格式调整 Ctrl+S:保存文件Ctrl+[, Ctrl+]:代码行缩进Ct ...
- ubuntu系统安装微信小程序开发工具
在ubuntu系统中安装微信小程序开发工具之前,先要安装wine与git 一.安装wine 1.如果您的系统是64位,启用32位架构(如果您还没有) sudo dpkg --add-architect ...
- 解决Mac版微信小程序开发工具打开后无法显示二维码
问题描述: 正常情况下,打开微信小程序开发工具后,首页提示扫描二维码进行登陆,但是如果不显示二维码,当然无法登陆. 解决方案: 无法显示二维码肯定是程序运行哪里出错了,我们直接点击桌面图标是无法排查错 ...
- 微信小程序开发工具下载以及安装教程
微信公众平台上登录你的微信小程序账号 登录进入小程序开发-工具-下载,再根据你的系统选择相对应的版本地址进行下载. 以管理员身份运行下载,点击下一步,如图所示: 下一步,就会出现许可证协议 ...
- 5款微信小程序开发工具使用报告,微信官方开发工具还有待提升
微信小程序已经内测有一段时间了,笔者本着好奇加学习的心态写了几个小demo,虽然在MINA框架上并没有遇到太多的坑,但官方开发工具实在不敢恭维. api提示不全,要一个个查api啊,写代码超级慢啊 很 ...
- 微信小程序开发工具
微信小程序 1● 工具下载 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 2● webchart_devto ...
- Archlinux下安装微信小程序开发工具
由于微信小程序没有Linux版本,所以需要用wine来跑 一.安装wine sudo pacman -S wine 二.安装nwjs-sdk 微信开发工具包基于nwjs-sdk #没有wget就先安装 ...
随机推荐
- 写给正在入坑linux系统的伙伴
光阴似箭,时光如梭,转年出来工作已经3年了.从一个职场新人慢慢熟悉职场的工作方式,适应职场工作的环境,学习了很多知识,也总结了很多经验.现在的目标就是一步一个脚印,慢慢打磨自己,希望早日成为取代其他人 ...
- ceph PG数量调整/PG的状态说明
优化: PG Number PG和PGP数量一定要根据OSD的数量进行调整,计算公式如下,但是最后算出的结果一定要接近或者等于一个2的指数.调整PGP不会引起PG内的对象的分裂,但是会引起PG的分布的 ...
- AC自动机-HDU2896-模板题
http://acm.hdu.edu.cn/showproblem.php?pid=2896 另一道AC自动机的模板题,不过这题需要记录一下具体的匹配情况. /*------------------- ...
- HNOI2017礼物
礼物 这估计是最水,最无脑的一道题了 首先发现总和最接近时答案最小 发现答案就是\((\sum_{i=1}^{n}a[i]^2+b[i]^2)-2*max(\sum_{i=1}^{n}a[i]*b[i ...
- 【LOJ#572】Misaka Network 与求和(莫比乌斯反演,杜教筛,min_25筛)
[LOJ#572]Misaka Network 与求和(莫比乌斯反演,杜教筛,min_25筛) 题面 LOJ \[ans=\sum_{i=1}^n\sum_{j=1}^n f(gcd(i,j))^k\ ...
- SharePoint 2013 APP 开发示例 (五)跨域访问 Web Service (REST API)
虽然 JQuery 也能通过授权header实现跨域, 但SharePoint 提供了更简单的方法,它被实现在SP.RequestExecutor里 .它能访问跨域的服务包括REST AP ...
- JDK源码分析(5)Vector
JDK版本 Vector简介 /** * The {@code Vector} class implements a growable array of * objects. Like an arra ...
- 【模板】spfa
代码如下 #include <bits/stdc++.h> using namespace std; const int maxv=1e4+10; const int maxe=5e5+1 ...
- ST表与树状数组
ST表 st表可以解决区间最值的问题.可以做到O(nlogn)预处理 ,O(1)查询,但是不支持修改. st表的大概思路就是用st[i][j]来表示从i开始的2的j次方个树中的最值,查询时就从左端点 ...
- R语言:多个因变量时,如何在plot函数中画多条曲线(plot,points,lines,legend函数)
最近阅读一篇文献<Regional and individual variations in the function of the human eccrine sweat gland>, ...