微信小程序入门，可跳过

pages，页面，

window 窗口

wxml html

wxss css

view div

微信公众平台

text span

image img

app.json 中配置页面

backgroundTextStyle 背景字体样式

"enablePullDownRefresh": true 允许下拉刷新

"navigationBarBackgroundColor": "#ff82ab",导航栏背景颜色

"navigationBarTextStyle":"black",导航栏字体颜色

"navigationBarTitleText": "情书",导航栏字

tabBar底部导航栏

app.json

{

"pages":[

"pages/demo1/demo1",

"pages/demo2/demo2",

"pages/demo3/demo3",

"pages/demo4/demo4"

"window":{

"backgroundTextStyle":"dark",

"navigationBarBackgroundColor": "#ff82ab",

"navigationBarTitleText": "情书",

"navigationBarTextStyle":"black",

"enablePullDownRefresh": true

"tabBar": {

"selectedColor": "#ff82ab",

"list": [{

"pagePath": "pages/demo1/demo1",

"text": "情书",

"iconPath": "img/1.png",

"selectedIconPath": "img/xiaoxi_o.png"

{

"pagePath": "pages/demo2/demo2",

"text": "通讯录",

"iconPath": "img/2.png",

"selectedIconPath": "img/tongxunlu.png"

{

"pagePath": "pages/demo3/demo3",

"text": "发现",

"iconPath": "img/3.png",

"selectedIconPath": "img/faxian.png"

{

"pagePath": "pages/demo4/demo4",

"text": "我的",

"iconPath": "img/4.png",

"selectedIconPath": "img/31wode.png"

}

]},

"style": "v2",

"sitemapLocation": "sitemap.json"

}

scroll-view scroll-x 要设置宽度默认为750 rpx

scroll-y 设置高度，宽高都不为自适应

swiper轮播宽100%高300 rpx

<swiper-item>

<image>

<swiper-item>

autoplay是否自动切换true

swiper w100 h300rpx

swiper image w100 h300rpx

interval自动切换时间间隔默认5000毫秒

interval=“2000”

circular是否衔接滑动true

从左往右，而不是从左往右再右往左

vertical 滑动方向是否为纵向？true

indicator-dots是否显示面板指示点？true

indicator-color面板指示点颜色

indicator-active-color当前选中的指示点的颜色

current当前所在页面的index从零开始

previous-margin 前边距

next-margin 后边距

<swiper autoplay="true" interval="1000" circular="true" >
<swiper-item><image src="/img/w.jpg"></image></swiper-item>
<swiper-item><image src="/img/1.png"></image></swiper-item>
<swiper-item><image src="/img/w.jpg"></image></swiper-item>
</swiper>

数据绑定

微信小程序入门，可跳过相关推荐

微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
天河微信小程序入门《四》：融会贯通，form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
微信小程序入门---01
目录微信小程序入门一.小程序简介二.第一个小程序二.小程序代码的构成三.WXML模块四.WXSS 样式五.JS 逻辑交互六.组件七.API 八.WXML 模板语法 - 数据绑定九. ...
微信小程序入门之常用组件(04)
常见组件重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等一.vi ...
微信小程序入门案例-会议邀请函
微信小程序入门案例-会议邀请函涉及内容:地图目录结构: pages\index\index.wxml <view class="box"><view clas ...
【零基础微信小程序入门开发一】小程序介绍及环境搭建
什么是小程序? 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...
微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
微信小程序入门七登录注册
上一章介绍了微信小程序入门六本地缓存和搜索 ,这章介绍小程序的登录注册页面.主要有表单的验证,错误信息的提示,form表单的取值,get / post 请求 ,反馈交互提示框,页面跳转以及页面U ...
微信小程序入门-音乐播放器
萌新,随便做做,只是了解一下微信小程序,希望可以给看到的胖友一点参考. 之前在网上看到这个人入门四天做完一个,我五天做完了,比他好看,突然有一点自信然后发现自己特别不乐意重新看自己的代码,总觉得写的 ...
从零开始的微信小程序入门教程(一)
从零开始的微信小程序入门教程(一) 之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践 ...

微信小程序入门，可跳过

微信小程序入门，可跳过相关推荐

最新文章

热门文章