为您找到搜索结果：1312个
微信小程序~TabBar底部导航切换栏
底部导航栏这个功能是非常常见的一个功能，基本上一个完成的app，都会存在一个导航栏，那么微信小程序的导航栏该怎么实现呢？经过无数的踩坑，终于实现了，好了，先看看效果图。对于底部导航栏，小程序上给出的文档要求里面的item最少2个，最多五个。好了，先看看代码：在项目中找到这个文件 1{2"pages":[3"pages/index/index",4"pages/logs/logs",5"pages/mine/mine"67],8"window":{9"backgroundTextStyle":"light",10"navigationBarBackgroundColor":"#fff",11"navigationBarTitleText":"首页",12"navigationBarTextStyle":"black"13},1415"tabBar":{16"color":"#a9b7b7",17"selectedColor":"#11cd6e",18"borderStyle":"black",19"list":[{20"selectedIconPath":"images/ico...
微信小程序~用户转发 onShareAppMessage
只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，在用户点击转发按钮的时候会调用，此事件需要return一个Object，包含title和path两个字段，用于自定义转发内容 代码使用onShareAppMessage自定义转发字段//page.jsPage({onShareAppMessage:function(){return{title:'自定义转发标题',path:'/page/user?id=123'}}}) ....
微信小程序~上拉加载onReachBottom
代码：//页面上拉触底事件的处理函数onReachBottom(e){console.log("底部")//滚动到页面执行该方法wx.showToast({title:'加载中...',icon:'loading',duration:2000})/*这里执行你需要的请求数据追加到循环数组就好了*/},onPageScroll(e){console.log(e)//滚动条滚动的位置（e.scrollTop）从头部开始计算}, 原理：上拉加载更多这个需求我相信应该应用颇为广泛的，今天说我认为两种可行的方式哈。一、第一个应该是最简单的一种实现方式，文档自带的一个api可以监听滚动到页面底部的方法（onReachBottom）、"onPageScroll"方法可以监听页面滚动条的位置。(PS：页面.json中'onReachBottomDistance:number'默认为50，这个可以设置在距离底部多少px执行onReachBottom方法，具体使用看你需求。)1.首先准备几个盒子使其超出page页面高度产生滚动条、然后准备一个加载动画具体实现如下：//wxml：arr是lengt...
微信小程序~下拉刷新PullDownRefresh
一、onPullDownRefresh回调代码：//http://itlao5.comonPullDownRefresh:function(){console.log('onPullDownRefresh')this.queryData(id)}, 二、enablePullDownRefresh支持然而=下拉触发不了js回调，需要再json中配置支持下拉刷新，即："enablePullDownRefresh":true//请注意是true，不是"true"字符串，//部分开发者发现设置了还是无效，//可能是因为设置的"enablePullDownRefresh":"true"这个可以在app.json中进行全局配置，使所有页面都带有下拉刷新功能；也可以在需要下拉刷新功能的page对应的json中配置。这下好了，下拉刷新功能完成了。三、backgroundTextStyle配置但是，还有一点点不完美的地方，别人的小程序，下拉刷新时，可以看到顶部有三个点闪烁的动画；而此时小程序顶部一片空白。原来，还有一个配置，"backgroundTextStyle":""，支持da...
微信小程序~跳页传参
【1】需求： 点击商品，跳到相应商品详情页面 【2】代码： （1）商品列表页<viewclass="goodsList"><viewwx:for="{{goods}}"wx:key="index"bindtap="toDetail"data-item="{{item}}"class="goodArea"><imagesrc="{{item.src}}"></image><text>{{item.name}}</text><text>{{item.price}}</text></view><viewclass="placeholder"></view></view>/*pages/test/test.wxss*/.goodsList{display:flex;justify-content:space-around;align-items:center;text-align:center;fl...
微信小程序之执行环境
明白了小程序中的JavaScript同浏览器以及NodeJS有所不同后，开发者还需要注意到另外一个问题，不同的平台的小程序的脚本执行环境也是有所区别的。小程序目前可以运行在三大平台：iOS平台，包括iOS9、iOS10、iOS11Android平台小程序IDE这种区别主要是体现三大平台实现的ECMAScript的标准有所不同。截止到当前一共有七个版本的ECMAScript标准，目前开发者大部分使用的是ECMAScript5和ECMAScript6的标准，但是在小程序中，iOS9和iOS10所使用的运行环境并没有完全的兼容到ECMAScript6标准，一些ECMAScript6中规定的语法和关键字是没有的或者同标准是有所不同的，例如：箭头函数letconst模板字符串…所以一些开发者会发现有些代码在旧的手机操作系统上出现一些语法错误。为了帮助开发者解决这类问题，小程序IDE提供语法转码工具帮助开发者，将ECMAScript6代码转为ECMAScript5代码，从而在所有的环境都能得到很好的执行。开发者需要在项目设置中，勾选ES6转ES5开启此功能。图2-18勾选ES6转ES...
微信小程序之 ECMAScript
在大部分开发者看来，ECMAScript和JavaScript表达的是同一种含义，但是严格的说，两者的意义是不同的。ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言，JavaScript是ECMAScript的一种实现。理解JavaScript是ECMAScript一种实现后，可以帮助开发者理解小程序中的JavaScript同浏览器中的JavaScript以及NodeJS中的JavaScript是不相同的。ECMA-262规定了ECMAScript语言的几个重要组成部分：语法类型语句关键字操作符对象浏览器中JavaScript构成如下图：图2-15浏览器中的JavaScript浏览器中的JavaScript是由ECMAScript和BOM（浏览器对象模型）以及DOM（文档对象模型）组成的，Web前端开发者会很熟悉这两个对象模型，它使得开发者可以去操作浏览器的一些表现，比如修改URL、修改页面呈现、记录数据等等。NodeJS中JavaScript构成如下图：图2-16NodeJS中的JavaScriptNodeJS中的JavaScript是由ECMAS...
微信小程序~模板template引用
当您的项目需要多次使用同一个布局和样式的时候，您就可以考虑使用template（模板）来减少冗余代码。使用方式：1.新建一个template文件夹来存放您的通用模板；2.在文件夹里面新建一个wxml，wxss,进行模板和样式的定义；3.设置模板的name，以及里面您需要定义的wxml内容；4.设置wxss样式；5.在需要使用的页面使用import导入该wxml页面，注意路径位置；6.在需要使用的wxss文件导入该wxss；7.在页面上使用该模板，通过is判断使用哪个模板,这里我们使用name为courseStudent模板（此处使用的是列表循环，所以data值为item）； 若将data使用ES6展开运算符‘...’，则模板里面绑定数据就不需要在前面加入item了<!--使用ES6展开运算符--><templateis="courseStudent"data="{{...item}}"></template><templatename="courseStudent"><!--此处渲染数据的时候就不需...
微信小程序-数组操作
Page({data:{list:[{id:1,name:'芒果',count:1},{id:2,name:'香蕉',count:6},}]}})向前插入数据//要增加的数组varnewarray=[{id:6,name:'向前增加数据--',count:89}];//使用concat()来把两个数组合拼起来this.data.list=newarray.concat(this.data.list);//将合拼之后的数据，发送到视图层，即渲染页面//大伙请记录，修改了数据后，一定要再次执行`this.setData()`，页面才会渲染数据的。this.setData({'list':this.data.list}); 向后插入数据demo//要增加的数组varnewarray=[{id:5,name:'向后增加数据--',count:89}];this.setData({'list':this.data.list.concat(newarray)}); 修改数组//我们要修改的数组this.data.list[Index].name='修改了内容';th...
微信小程序API~检查登录状态
检查登录态是否过期。通过wx.login接口获得的用户登录态拥有一定的时效性。用户越久未使用小程序，用户登录态越有可能失效。反之如果用户一直在使用小程序，则用户登录态一直保持有效。具体时效逻辑由微信维护，对开发者透明。开发者只需要调用wx.checkSession接口检测当前用户登录态是否有效。登录态过期后开发者可以再调用wx.login获取新的用户登录态。调用成功说明当前session_key未过期，调用失败说明session_key已过期。更多使用方法详见 小程序登录。Objectobject属性类型默认值必填说明successfunction 否接口调用成功的回调函数failfunction 否接口调用失败的回调函数completefunction 否接口调用结束的回调函数（调用成功、失败都会执行）wx.checkSession({success(){//session_key未过期，并且在本生命周期一直有效},fail(){//session_key已经失效，需要重新执行登录流程wx.login()//重新登录}}) ...
微信小程序API~地理位置location
（1）使用微信内置地图查看位置使用微信内置地图查看位置Objectobject属性类型默认值必填说明latitudenumber 是纬度，范围为-90~90，负数表示南纬。使用gcj02国测局坐标系longitudenumber 是经度，范围为-180~180，负数表示西经。使用gcj02国测局坐标系scalenumber18否缩放比例，范围5~18namestring 否位置名addressstring 否地址的详细说明successfunction 否接口调用成功的回调函数failfunction 否接口调用失败的回调函数completefunction 否接口调用结束的回调函数（调用成功、失败都会执行）wx.getLocation({type:'gcj02',//返回可以用于wx.openLocation的经纬度success(res){constlatitude=res.latitudeconstlongitude=res.longitudewx.openLocation({latitude,longitud...
微信小程序~App.js中登录
（1）初始化项目中App.js登录代码//登录wx.login({success:res=>{//发送res.code到后台换取openId,sessionKey,unionId}}) （2）登录接口：wx.login(Objectobject)调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。更多使用方法详见 小程序登录。参数：Objectobject属性类型默认值必填说明最低版本timeoutnumber 否超时时间，单位ms1.9.90successfunction 否接口调用成功的回调函数 failfunction 否接口调用失败的回调函数 completefunction 否接口调用结束的回调函数（调用成功、失败都会执行） object.success回调函数参数Objectres属性类型说明codestring用户登录凭证（有效期五分钟）。...
微信小程序API~用户信息
用户信息stringnickName用户昵称stringavatarUrl用户头像图片的URL。URL最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640x640的正方形头像，46表示46x46的正方形头像，剩余数值以此类推。默认132），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。numbergender用户性别gender的合法值值说明最低版本0未知 1男性 2女性 stringcountry用户所在国家stringprovince用户所在省份stringcity用户所在城市stringlanguage显示country，province，city所用的语言language的合法值值说明最低版本en英文 zh_CN简体中文 zh_TW繁体中文 ....