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

多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里记录一下 微信小程序的Tab 想要写自定义Tab首先要知道原生Tab该怎么写,新建一个微信小程序运行起来,默认是这个样子的 简单修改一下小程序自带的logs页面,大概是这个样子(通过两个按钮模拟角色,就不写登录了) 目前想要在两个页面之前来回切换只能通过修改app.json中pages的顺序才能实现

参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

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

前言 微信小程序年前的跳一跳确实是火了一把,然后呢一直没有时间去实践项目,一直想搞但是工作上不需要所以,嗯嗯嗯嗯嗯emmmmm..... 需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 一:基础框架 官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/ (其实官方文档写的很清楚了) 跟着官方文档一步一步来,新建一个小程序项目就好 然后呢,毕竟默认的只是基本骨架,肌肉线条还是要自己填的  app.json 是当前小程序的全

今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用. 项目的目录是这个样子的: app.js.app.json.app.wxss是全局文件,必不可少的文件.定义在app.wxss中的样式为全局样式,作用于每一个页面.在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器. app.js文件代码: App({ onLaunch: function () { console.log('小程序已启动') }, onShow: f

在微信小程序开发app.json(app.json它是定义全局页面) 只是用来部署微信底部的图标,最多不能大于五个 "tabBar":{ "selectedColor":"#1AAD16", //控制我们点击图标的颜色 "list":[ //用list列表形式书写 { "pagePath":"pages/index/index", //表示点击图标跳转的路由 "text&quo

1.找到项目根目录的配置文件 app.json,在配置文件中加入配置代码.例如: "tabBar": { <!--底部的导航配置属性--> "color": "为选择时底部导航栏的颜色", "selectedColor": "选中时底部导航栏的颜色", "borderStyle":"底部导航栏边框样式", "list": [{ <

一.Taro简介 1.名字由来 Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼. 2.taro是什么 Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用. 3.官方文档 https://taro-docs.jd.com/taro/docs/README/index.html 二.安装 1.node版本 node版本需要>=12.0.0(可以命令行输入 node

微信小程序和vue还是有点差别的,要想实现通过动态切换class来达到切换css的效果,请看代码: //wxml页面: <view class="tab"> <view wx:for="{{catList}}" wx:key="index" bindtap="tabs" class="{{num==index?'active':''}}" data-index="{{index}

在写小程序的时候,一般会碰到底部弹出动画,就像下面这样的效果 直接进入正题 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html 1.首先需要写点击触发事件 <view class='text' bindtap='chooseSezi'>请选择:颜色/尺码</view> 这是点击之后需要弹出的内容,为了方便我把里面的内容去掉了,maskLayer是遮罩层,choose是内容 <!--隐藏区域 --&g

wx.navigateToMiniProgram({ appId: 'xxxxxxxxxxxxxxxxxx', // 要跳转的小程序的appid path: 'page/index/index', // 跳转的目标页面 extarData: { open: 'auth' }, success(res) { // 打开成功 } }) 注意:从小程序A内跳转到小程序B内有一个前提条件:A和B必须被同一个公众号关联

简单来说分两步走: 1.配置项目根目录的 app.json 文件中的 navigateToMiniProgramAppIdList { "pages": [ "pages/index/index" ], "navigateToMiniProgramAppIdList": [ "小程序APYID" ] } 2.在项目对应的 wxml 中使用 navigator 标签进行配置 <navigator class="&

在app.json处设置“tabBar”,例子如下: { "pages": [ "pages/index/index", "pages/pages1/pages1", "pages/pages2/pages2" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundCol

目标:做个横向导航,可以横向滚动. 思路:使用scroll-view组件,可实现横向滚动功能.scroll-view内包含一个动态的view列表,代表导航的每一项,导航要接收动态数组,然后使用列表展示.使用模板技术做到可复用. 按照思路,先要做个template. 新建一个wxml文件:navbar.wxml <template name="navbar"> <scroll-view class='navbar' scroll-x="true" s

第一步,在组件里编写弹窗的代码 <!-- 活动类型弹框 --> <view class='bottomModel' wx:if="{{modelFlag}}" catchtouchmove="toCatch"></view> <view class='fixedModel' wx:if="{{modelFlag}}" animation='{{animationData}}'> <view c

首先先看一下pages的目录结构吧. 我创建了一个topics页面.3个文件全创建好了之后 我往topics.js添加数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* ---topics.js----*/   Page({   data:{       topics: [       {title:"初始angular"},       {title:"初始ionic"},       {title:"初始we

首先先看一下pages的目录结构吧. 我创建了一个topics页面.3个文件全创建好了之后 我往topics.js添加数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* ---topics.js----*/   Page({   data:{       topics: [       {title:"初始angular"},       {title:"初始ionic"},       {title:"初始we

描述 模仿ios浏览器底部弹框效果. 遮罩层淡入淡出,弹框高度根据内容自适应. 效果 源码 popup-bottom.wxml <!-- popup-bottom.wxml --> <view class="wrap" hidden="{{!myVisible}}"> <view class="mask {{visible ? 'mask-show' : ''}}" bindtap="_onCancel&q

在 app.json    文件里面 : { "pages":[ "pages/index/index", "pages/logs/logs", "pages/topic/topic", "pages/category/category" ], "window":{ "backgroundTextStyle":"light", "navi

<view class='userperson'> <view class='f30 flexca'>请选择您的注册身份</view> <view class='select-only f30'> <view class='flexa '> <view class="so-3 flexca {{selectIndex==0?'active1':''}}" data-selectIndex='0' bindtap='sel