示例效果: 功能点分析: 1.点击switch开关,切换主题皮肤(包括标题栏.底部tabBar):2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果3.把设置保存到本地,退出应用再进来时,依然加载上次设置的皮肤 步骤: 1.需要切换的皮肤:新建一个skin目录,下面写一个skin.wxss black_box就是最外面,也是最大的盒子(除了默认的page哈):  black_box就是切换的皮肤: 还有关键一步,在app.wxss文件中把这个皮肤文件引入,因为换肤是所有页面都变化 @imp

在做微信小程序换皮肤的时候,需要动态修改菜单栏(TabBar)和导航栏(NavigationBar) 但是在小程序中它们的样式是写在app.json里面,而且app.json是静态编译,运行时哪怕你修改了里面的值,也是不起做作用的. 不过官方提供了动态修改两个样式的api. 动态修改NavigationBar wx.setNavigationBarColor({ frontColor:"#ffffff", backgroundColor:'#000000' }); 动态修改TabBar

转自:https://github.com/tencentyun/blog/issues/1 在刚结束的全球互联网技术大会(GITC)里面,我在前端专场给大家分享了「微信小程序云端解决方案探索之路」,介绍到了我们之前对小程序云端解决方案的探索过程. 小程序特性思考 小程序刚推出的时候,很多人都觉得它就是 H5,因为开发小程序的三大语言和 HTML.CSS.JS 是一脉相承的,即使改变了扩展名也改不了其实质. 那么小程序的实质到底是不是 H5 呢?经过我们的论证分析,我们认为小程序并不是 H5 应

底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的文档要求里面的item最少2个,最多五个. 好了,先看看代码: 在项目中找到这个文件 1 { 2 "pages":[ 3 "pages/index/index", 4 "pages/logs/logs", 5 "pages/mine/min

一.摘要 小程序中我们会经常使用到this.data与this.setData.其中this.data是用来获取页面data对象的,而this.setData是用来更新界面的.那么他们之间的区别与联系你真的搞懂了吗? 二.正文 this.data可以获取页面data对象,但是它返回的对象到底是新的对象还是仅仅只是一个引用呐.这个很关键,在日常开发中很可能因为不知道或者是自己的疏忽导致bug,而且很难排查原因.带着这个疑问我们来做一下试验.由于时间比较紧,博主就不单独写demo了,项目中可能有大量

 domain.js // 获取当前账号信息,线上小程序版本号仅支持在正式版小程序中获取,开发版和体验版中无法获取. // envVersion:'develop','trial','release' // 开发 / 体验 / 正式版 var baseUrl = null ; const { miniProgram: { envVersion } } = wx.getAccountInfoSync(); console.log(envVersion) switch (envVersion) {

1.data里定义切换图片的地址和切换的标识 data:{ show:true, yes:"http://101.89.144.168:9090//files/jk/yd/images/index/banner-3.jpg", no:"http://101.89.144.168:9090//files/jk/yd/images/index/banner-1.jpg" }, 2.组件里使用三元表达式 <image src="{{show?yes:no}

加入购物车的时候,往往会有产品相关属性的选择,比如:尺寸,规格等.像我做的项目中,就有一个门店的选择,如下图: 我们如何做到当前点击的这个高亮呢?今天就讲一下如何实现这个功能. 思路: 1.定义一个高亮的样式,我就命名为active了: 2.获取你点击的这个id或者其他的唯一属性,我这里的唯一属性是campusId; 3.通过判断你点击的这个元素的campusId 是不是 等于 它自身的campusId,如果等于就添加active的样式. 相关代码: wxml: <view class='row

一.功能描述 在同一个页面内实现不同展示页面的切换功能,如下图所示 二.代码实现 1. index.js Page({ /** * 页面的初始数据 */ data: { currentData : 0, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, //获取当前滑块的index bindchange:function(e){ const that = this; that.setData({ currentData: e.d

这里主要用到了swiper组件和三目运算,直接上代码, 样式只有三个class,简单粗暴,懒的小伙伴们可以直接拿来用,喜欢的点个支持 <view> <view class="swiper-tab"> <view class="bre swiper-tab-list {{tab==0 ? 'on' : ''}}" data-current="0" bindtap="tab_click">图文详

1.初始data数据 Page({     data:{          code:'1234',         reward:[{             name:"艾伦",             img:"../img/success.png",             status:1         },         {             name:"郝建",             img:"../img/s

比如我现在有个data数据如下: data: { playIndex: null, courseList: [{ videoId: '0', isPlaying: false, }, { videoId: '1', isPlaying: false, }] }, 我现在想要修改courseList里面的isPlaying的值该怎么做呢? var thisIdx = e.currentTarget.dataset.index; var playStatus = "courseList["

wxml <scroll-view scroll-x="true" class="ip_tab_comtainer"> <view class="ip_tab_comtainer_padd"></view> <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}"> <vi

this.data.xx是用来获取页面data对象的----------只是js(逻辑层)数据的更改: this.setData是用来更新界面的---------用于更新view层的.

重要:极乐商店域名变更:wxapp.dreawer.com/变更为store.dreawer.com/ 每周一笑 当年刚学打篮球的时候,疯狂地迷恋上了乔丹,然后迷恋上了NIKE,更熟记了NIKE的那句广告语:JUST DO IT. 然后-我从此进入了IT行业. 上周更新 小程序新功能--手机号快速填写及会员卡开卡组件开放 2017-8-25 小程序分享等能力升级 2017-8-19 微信部分功能故障,正在紧急修复中 2017-8-21 上周资教 微信小程序--真机和模拟器效果不一样解决方案 20

作者:gou-tian 来自:github 幻灯片 使用微信小程序原生组件swiper实现. <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" wx:ke

微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view class="body"> <view class="nav bc_white"> <view class="{{selected?'red':'default'}}" bindtap="selected"

解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id="ringCanvas" hidden="{{currentTab == 1}}"></canvas> <view hidden="{{currentTab !== 1}}" id="one" class="

最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当前屏中. 一.wxml结构tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动. tab内容可左右滑动切换,使用swiper组件实现 为了偷懒,所以数据都通过wx:for遍历重复出来. 说明:1.设置data-current属性用于:点击当前项时,通过点击事件swichNav中

代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现用户自定义弹框 带动画(动画可做参靠,个人要是觉得不好看可以自定义动画) 获取弹出框的内容,自定义事件获取 2.案例目录结构 二.程序实现具体步骤 1.选项卡xxx.wxml代码 a.tab1代码

代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 基于swiper组件的tab切换 2.案例目录结构 二.程序实现具体步骤 1.tab切换index.wxml代码 <view class="continer"> <!--内