微信小程序:快递查询(内含结构详解)[小鱼微信小程序]

微信小程序:快递查询(内含结构详解)由小鱼微信小程序精心整理,并分享给大家。喜欢该资源的小伙伴请下载使用,注册、回复、每日签到、点赞送大量积分,满足您免费下载的愿望

目录结构

  • pages 所有页面
  • app.js 全局js
  • app.json 注册页面,配置小程序
  • app.wxss 全局样式文件

pages存放页面文件

每个页面一个文件夹,下面.wxml和.js文件是必需的。 .wxss和.josn文件不是必需的,如果没有的话就用全局的app.wxss和app.json 如果有的话就覆盖掉全局的用自己的

app.json页面

{ //页面注册,无论有几个页面,所有都要在pages里面注册 "pages":[ "pages/index/index", "pages/logs/logs", "pages/main/main", "pages/main1/main1", "pages/main2/main2", "pages/main3/main3", ],

//上导航配置及app背景颜色设置 "window":{ //是否开启下拉刷新 "enablePullDownRefresh":true,

//窗口背景颜色,在上拉刷新,下拉刷新,navigate切换页面时可以看见 "backgroundColor":"#eee",

//下拉背景字体、loading 图的样式,仅支持 dark/light,(string形式) "backgroundTextStyle":"light",

//上导航条背景颜色 "navigationBarBackgroundColor": "orange",

//上导航标题文字 "navigationBarTitleText": "上导航标题文字",

//上导航标题字体颜色,仅支持white和black "navigationBarTextStyle":"white" },

//底部导航配置 "tabBar": { "color": "#a9b7b7",//导航字体默认颜色

"selectedColor": "#eb4f38",//导航字体选中时颜色

"borderStyle": "black", //上border颜色,仅支持 black/white(string形式)

"backgroundColor": "rgba(0,0,0,0.4)",//底部导航背景色

"list": [ //导航列表2-5个 { "pagePath": "pages/index1/index1", //每个导航的网页对应的路径 "text": "首页", //标题 "iconPath": "images/wechat.png", //默认小图标路径 "selectedIconPath": "images/wechatHL.png" //选中时的小图标路径 },

{ "pagePath": "pages/index2/index2", "text": "日记", "iconPath": "images/pause.png", "selectedIconPath": "images/play.png" },

{ "pagePath": "pages/index3/index3", "text": "指南", "iconPath": "images/pause.png", "selectedIconPath": "images/play.png" }, ] },

//网络请求超时时间 "networkTimeout": { "request": 10000, "downloadFile": 9000, "uploadFile":8000, "connectSocket":7000 },

//是否开启debug模式 "debug": true }

//说明:根据官方文档,上述color和bg-color类型为HexColor即16进制类型,(指定仅支持 black/white,string形式的除外),但实测rbg,rgba和red这些类型目前也支持,但是建议大家还是按文档要求来设置为16进制类型即: #ffffff 类型; // //使用时仅需将文件复制下来,根据需求改动即可; // //app.json为标准的json文件,所以不能存在有注释,使用的时候需把注释去掉;

app.js页面

App({ //当小程序初始化完成时,会触发 onLaunch(全局只触发一次) onLaunch: function () {

//onLaunch时调用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) } }) } }) } }, //获取后台数据 onshow:function(){ wx.request({ url: ‘test.php’, data: { x: ‘xxx’, y: ‘yyy’ }, header: { ‘Content-Type’: ‘application/json’ }, success: function(res) { console.log(res.data) } })

},

//设置全局数据 //本页面通过this.globalData即可取得数据 globalData:{ userInfo:null } //其他页面可以通过getApp()获取到小程序实例 //其他页面可以通过getApp().globalData.xxx获取到全局数据 })

app.wxss页面

.common { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; }

//仅支持: 类:.common ID:#common 标签:common 多个标签:common1,common2 伪类::after 伪类::before //不支持层级,如.common > view 或者.common view

//引入新的单位rpx: rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

及新的rem: rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。

//写在app.wxss里面的样式将被设置为公有的,对于其他页面都是可用的

数据绑定添加事件

视图层在标签中添加 以bind或者catch开头 bind是冒泡,catch阻止冒泡 示例:

<div> bindtap="showName">    {{name}}</div>
//js中事件函数"showName"function(){    //事件处理代码    console.log("hello");}
事件类型

事件有:

  • touchstart
  • touchmove
  • touchend
  • touchcancel
  • tap点触摸 相当于pc的click
  • longtap 触摸后350ms再离开

事件对象

  • type 事件类型
  • timeStamp 事件戳
  • target 触发事件的组件(DOM元素),也就是事件源
  • currentTarget 当前组件、
  • detail 事件相关的其他信息



项目地址:https://github.com/shunrong/WeixinApp/tree/master/WeixinProgram
项目下载:(4个小demo) 微信小程序:快递查询(内含结构详解) WeixinApp-master.zip (168.41 KB, 下载次数: 82)

小鱼源码网www.51xyyx.com

轻松一刻:

2012年度十佳小小说入围奖:第6篇《对联》 一对中医博士生要结婚了,男士姓龙,女士姓陈。导师为他们撰写了一副新婚对联,专业性很强,看后人人叫绝。上联:龙骨一根,退烧止痒又生津。下联:陈皮两片,消肿化痰还解渴。 横批:一日见效 !
 下载地址
登录  查看下载地址。

提示:注册,评论,每日签到,点赞可获得积分。

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 2805477110@qq.com

周一至周六,8:00-21:00,节假日休息
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
切换注册

登录

忘记密码 ?

切换登录

注册