微信小程序
文章平均质量分 91
na_xie_nian
学无止境!
展开
-
微信小程序学习(1) —— 文件结构
文件结构 示例目录:HelloWorld *******************************************************分割线******************************************************** 全局文件 app.js文件这个是小程...转载 2018-08-09 18:08:11 · 496 阅读 · 0 评论 -
微信小程序学习(17) —— 获取系统日期和时间
获取当前系统日期和时间 在小程序中,新建项目时,就会有一个utils.js文件,就是获取日期和时间的,代码如下:utils.js: function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = da...转载 2018-09-12 21:28:53 · 1406 阅读 · 0 评论 -
微信小程序学习(15) —— 百度地图获取地理位置
由于小程序只提供了我们一个获取地理位置、速度的api,并没有获取的相关地位位置的信息等等,因此我们还需要借助一些第三方的api来实现 下面,介绍使用百度地图的api来获取地位位置的信息。 1> 第一步:先到百度开放平台http://lbsyun.baidu.com申请akhttp://lbsyun.baidu.com/index.php?title=wxjsapi/gui...转载 2018-09-09 19:53:52 · 1687 阅读 · 0 评论 -
微信小程序学习(14) —— 网络请求
网络请求,基本上是必须的环节之一。小程序提供了wx.request(object),与开发者的服务器实现数据交互的一个很重要的api。 最简单的用法如下(以GET请求为例) <view bindtap="bindSearchChange"><view> [javascript] view plain copybindS...转载 2018-09-09 18:24:15 · 250 阅读 · 0 评论 -
微信小程序学习(13) —— wxss
WXSS(WeiXin Style Sheet)与CSS对应,用于描述页面的样式。 特性内联样式:组件的 style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进style中,以免影响渲染速度。选择器对于常用的选择器,目前支持的选择器有:注:绿色背景色行表示官方文档中没有说明,但经个人亲测后确定也支持的选择器。目前不支持的选择器有:注意:如之前...转载 2018-08-30 08:40:42 · 303 阅读 · 0 评论 -
微信小程序学习(11) —— 列表渲染
示例:test.wxml:在组件内,使用属性wx:for=”{{ 数组 }}” ,数组当前项的变量名默认为item(变量需要使用双花括号)test.js:在Page()内的data定义一个数组运行: 内容转自:微信小程序视图层的列表渲染 —— 微信小程序教程系列(11)...转载 2018-08-23 18:28:02 · 327 阅读 · 0 评论 -
微信小程序学习(10) —— 视图层条件渲染和for循环
使用wx:if进行视图层的条件渲染 示例:wxml:使用view<!--index.wxml--><button bindtap="EventHandle">按钮</button><!-- wx:if --><view wx:if="{{boolean==true}}"> &a转载 2018-08-23 17:48:22 · 993 阅读 · 0 评论 -
微信小程序学习(12) —— 视图层的模板
示例:template.wxml:新建一个文件夹tem,并新建一个template.wxml文件使用<template>定义模板,并使用name指定模板的名字 index.wxml:使用import导入模板使用模板需要使用<template>,并使用属性is指定使用的模板名字运行: 内容转自:微信小程序视图层...转载 2018-08-27 22:22:19 · 294 阅读 · 0 评论 -
微信小程序学习(9) —— 视图层数据绑定
数据绑定WXML 中的动态数据均来自对应 Page 的 data。只要把data中的数据改变,视图层就会自动改变,无需使用DOM操作。简单绑定数据绑定使用 Mustache 语法(双大括号)将变量包起来 使用方法: {{ 内容 }} 在组件中使用!不论是在组件包含在内,还是在组件属性内的,都是需要使用双花括号! 示例:index.wxml:index....转载 2018-08-22 11:46:48 · 210 阅读 · 0 评论 -
微信小程序学习(8) —— 作用域和模块化
文件作用域在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。示例:通过全局函数 getApp() 可以获取全局的应用实例,如果需要全局的数据可以在 App() 中设置,如: /* app.js */ App({ globalData: 1 }) /* ...转载 2018-08-22 11:42:03 · 331 阅读 · 0 评论 -
微信小程序学习(5) —— 全局属性使用
微信小程序提供了app.js文件,用于放置一些全局的函数和全局的属性。一般情况下,我都会把一些常用的函数和属性写在app.js文件内,这样不用在页面之间传值,或者不用重复加载。 下面以全局属性为例新建一个hello world项目在app.js页面中有一个globalData,这是一个全局对象。在里面添加一个属性 info:"你好" 那么要怎样才能获取到这些全局...转载 2018-08-13 18:11:47 · 490 阅读 · 0 评论 -
微信小程序学习(4) —— 新页面创建
快捷方法: 在app.json中直接配置路径,保存后自动生成目录; 或者:例如在web的开发中,新建一个页面只需要新建一个html文件即可。但是到在微信小程序中,新建一个页面也不只是新建一个wxml文件,那么该如何做呢?下面我们一起来学习 新建一个页面的步骤:1> 必须要创建一个wxml文件和一个js文件,并且文件名要同名(例:test.wxml 和 test...转载 2018-08-13 17:08:58 · 541 阅读 · 0 评论 -
微信小程序学习(3) —— 修改视图层数据
我们在正常的开发上,一般都比较少把视图层上面的数据写成固定形式的,很多都是通过动态获取数据时并更新页面上的数据显示出来下面让我们来一些学习,如何动态修改视图层的数据 需求:创建一个按钮,点击这个按钮,改变视图层上面的数据 示例:新建一个微信小程序的Hello World项目,找到index.wxml文件index.wxml:使用一个<button>元...转载 2018-08-13 16:42:57 · 621 阅读 · 0 评论 -
微信小程序学习(2) —— 生命周期实例演示
微信小程序的生命周期函数有2个一个是App的生命周期另一个是Page的生命周期 App的生命周期 示例:演示App的生命周期函数app.js:App({ onLaunch: function () { console.log("App生命周期函数——onLaunch函数"); }, onShow: function () { ...转载 2018-08-13 13:45:09 · 311 阅读 · 0 评论 -
微信小程序学习(7) —— 标题栏和导航栏的设置
设置标题栏 标题栏window在app.json文件里面,通过window对象里面的属性进行设置 示例:app.json: 运行: 设置导航栏 导航栏TabBar如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab ...转载 2018-08-15 18:35:05 · 720 阅读 · 0 评论 -
微信小程序学习(6) —— 页面跳转以及参数传递
关于页面的跳转,微信小程序有6中方法:分别是wx.navigateTo(OBJECT)函数,保留当前页面,跳转后可以返回原页面wx.redirectTo(OBJECT)函数,跳转后不可返回原页面wx.switchTab(OBJECT)函数,跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面wx.navigateBack(OBJECT)函数,关闭当前页面,返回上一页...转载 2018-08-15 16:39:52 · 460 阅读 · 0 评论 -
微信小程序学习 -- 开发者工具下载
官方下载地址: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201808原创 2018-08-11 15:06:27 · 273 阅读 · 0 评论 -
微信小程序学习(18) —— 上拉加载和下拉刷新
在微信小程序上实现下拉刷新、上拉加载的效果 使用系统提供的onPullDownRefresh、onReachBottom这2个事件,前提需要在app.json或page.json配置文件中设置,才能使用。app.json是全应用的页面都可以使用该事件,page.json则只是对应的页面才可以使用。 属性 类型 ...转载 2018-09-12 21:56:05 · 307 阅读 · 0 评论