项目目录: 模拟数据: utils / data.js function getSData() { var data = [ { "id": 1, "tree": { "id": 1, "desc": "宝宝奶粉", "desc2": null, "level": "level1", "logo": null, "po

话不多说,先给你们看看核心数据和结构: 一.数据: city的json array,letter的array (city的json array里的首字母是我手工放置进去的,你也可以通过for循环获得city_en的第一个字符来自动添加,但是为了赢得了性能我舍弃了灵活性) 二.布局:左边是scollview,右边是sidebar,这个布局要是布不好,可以先去了解下"flex布局" 三.sidebar布局,让sidebar-item的id为letter 四.设置sidebar距离顶部50p

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html 4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源

今天在使用mpvue开发微信小程序的过程中需要实现一个底部上拉选择列表的功能,因为之前做过H5微信公众号的开发,使用的就是有赞的Vant-ui,所以第一时间就想到了有赞的Vant Weapp UI框架,就找到了官网,根据官网的操作说明开始一顿操作,但是妈的发现并没有什么卵用, 这是官网上的安装说明,使用npm安装,但本人实属功底太浅,在main.js中不知道怎么import进去,然后就采用第二种方法,就在pages文件夹下面的每一个页面中的main.js中添加usingComponents,但是

作者:如也_d1c0链接:https://www.jianshu.com/p/0d2332984f8c来源:简书简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处. 先放出来Vant UI 的官方文档 https://youzan.github.io/vant-weapp/#/changelog 第一种 最简单的方法,直接下载Vant UI 或者是git clone https://github.com/youzan/vant-weapp.git git仓库的网址:https:/

导语 上一篇文章微信小程序搭建mpvue+vant已经介绍了如何搭起mpvue项目及引入vant,本篇文章继续在它的基础上,引入flyio,并做一些封装,目的是为了在小程序发起请求. 这时读者会有些疑问,小程序已经有了request,为什么还用flyio?这不是造轮子吗?我是这么想的,其实现在不管是mpvue,还是wepy都好像还不能完美编译出微信小程序和h5版本.为了以后应对老板有创建h5版本的想法,我们应该为以后复用小程序代码做好准备工作.既然h5也会有ajax,flyio也支持小程序和h5

第一步:查看是否已经装了node.js $ node -v $ npm -v   正确姿势 没有装的话前往Node.js官网安装 第二步:安装cnpm $ npm install -g cnpm --registry=https://registry.npm.taobao.org 第三步:安装 Vue Cli $ sudo cnpm install -g @vue/cli   正确姿势 第四步:想好项目名称,并创建它 先要进入你的代码目录,然后再创建,需要了解 我本地代码目录:/Users/hr

微信小程序没找到构建npm或者没找到node_modules目录解决方法如下: 按照微信小程序提供的文档npm install是不行的,直接提示没找到可构建的npm包. 1.直接安装:npm init就可以啦 2.接着npm install你的引入包命令(比如npm i vant-weapp -S --production),然后点击微信开发工具中的工具栏目下的构建npm,就会出现 例子:比如引入vant weapp: 直接 npm i vant-weapp -S --production 可以

1.官网 https://vant-contrib.gitee.io/vant-weapp/#/intro https://gitee.com/vant-contrib/vant-weapp 2.按装 https://vant-contrib.gitee.io/vant-weapp/#/quickstart#an-zhuang 1.购建 package.json 文件(在项目下cmd进入编辑器输入  npm init -y ) 2.在项目根目录上通过 npm 安装 npm i @vant/wea

若无小程序开发经验,可先阅读 玩转微信小程序 一文. 微信小程序正式上线已有几周时间,相信它的开发模式你已烂熟于胸,可能你也有所疑问,我竟能用 web 语言开发出如此流畅的几乎原生体验的应用.可能你又会猜这不就是 h5 么,厉害点的想不就是 hybrid 么.但是在我们的开发旅途中至始至终都没有使用过 webview ,为啥呢?开发时用的 view 一类的标签,浏览器又是怎么解析成页面的呢?带着重重疑惑,进入微信小程序源码分析吧! 开发平台 这个 IDE 是如何保证我们小程序的开发和预览的?简要

tabBar.list[2].selectedIconPath 文件不存在 很明显是文件名错了,定义的my-acive,少写了个t,眼睛出问题了~ module "static/vant/common/component" is not defined 引入有赞组件时候报错,ES6转ES5已经打开,最后发现是克隆之后复制dist下的文件时common没有复制过去造成 navigateTo:fail parameter error: parameter should be Object

微信小程序在 2.2.1 版本后增加了对 npm 包加载的支持,使得小程序支持使用 npm 安装第三方包. 之前在微信开发者工具选择“构建npm”会报错“没找到node_modules”目录”,这是因为“打开的方式不正确”. 我们以安装有赞的 vant库做例子 1. 初始化 现新建一个小程序, 在小程序根目录中(miniprogram)执行: npm init 输入一些基本的信息,可以一直回车,按默认就可以,然后会生成一个package.json文件 2. 安装第三方库 有赞文档地址:https

想学习如何使用mpvue开发微信小程序吗? 想知道微信消息推送如何实现吗? 想知道如何用springboot开发小程序后台吗? 看这里就全都有了.耗时一个月打造的微信小程序:PSN折扣助手前后端所有源码都开源啦! 扫描查看实际效果: 代码开源地址:https://github.com/FleyX/psnDiscountAssistant 技术栈 小程序端 mpvue:可以使用vue的大多数语法开发小程序 flyio: 轻量级的http请求库 vant: 有赞的小程序UI库 node.js爬虫端

主体内容 代码构成 数据:JSON 配置文件 结构:WXML 模版文件 样式:WXSS 页面样式 交互:JS 脚本逻辑文件 云开发 云数据库 云函数 云存储 WXML 是小程序框架设计的一套标签语言,结合小程序的基础组件,事件系统,可以构建出页面的结构,充当的就是类似HTML的角色 常见组件 <view></view>类似于div 胡子语法{{}}插值 数据存储在base.js文件中 列表渲染 wx:for {{index}} {{item}} wx:key 条件渲染 使用wx:i

1.什么是微信小程序 概念:小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用,体现了“用完即走”的理念,用户不需要关心是否安装太多应用的问题,应用将无处不在,随时可用,但又无需安装卸载: 微信之父   -----   张小龙 特点:一次性开发,可以跨终端.跨平台(不需要像开发APP那样满足IOS与android两个平台) 2.微信小程序与APP的区别 3.微信小程序的注册 注册过程 打开微信公众平台官网https://mp.weixin.

一.使用Vue.js注意事项 Vue.js在uni-app中使用的差异: 新增:uni-app除了支持Vue实例的生命周期,还支持应用启动.页面显示等生命周期 受限:发布到H5时支持所有vue的语法, 在小程序和App端部分功能受限 生命周期:Vue实例生命周期+应用生命周期+页面生命周期 使用uni-app的onReady : 代替vue的mounted 使用uni-app的onLoad : 代替vue的created 注意:不要在选项属性或回调上使用箭头函数,比如 created: () =

mpvue? {{}} 在vue和小程序中的区别? 01 小程序中{{}}和vue中的{{}}用法基本一致,可以显示data中的数据,可以写表达式 不一样的地方? 01 小程序的{{}}可以写在属性中 02 小程序的{{}}不能使用方法的调用 微信小程序中的 wx:key 01 wx:for 可以遍历数组中的数据 02 wx:for  一定要指定wx:key,不然会报一个警告 03 wx:key  的值有两种方式 如果遍历的值是一个对象,wx:key可以是对象中某一个唯一的属性 .  如果数组中

ZanUI-WeApp -- 一个颜值高.好用.易扩展的微信小程序 UI 库:https://cnodejs.org/topic/589d625a5c8036f7019e7a4a 微信小程序之官方UI框架we-ui 使用教程:https://blog.csdn.net/weixin_40099554/article/details/79735548 Vant Weapp:https://youzan.github.io/vant-weapp/#/intro WeUI:https://weui.i

uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponents wxcomponents下新建vant目录 创建完成后的目录结构 2. 项目中引入vant-weapp组件 在vant-weapp的GitHub Releases版块下载最新的zip包 解压下载文件,将dist目录拷贝到刚才创建vant目录中 3. 页面中使用引入的UI组件 在App.Vue文

使用微信小程序云开发制作自己的个人简历,简单高效. 首先需要了解小程序的基本结构以及云开发模式,及一些css样式基础. 使用小程序云数据库.vant组件库实现简历内容. 最终效果如下: 首先申请个人微信小程序,具体流程参照官方. 代码如下: index.json { "usingComponents": {//引入vant组件 "van-progress": "@vant/weapp/progress/index", "van-divi