资讯专栏INFORMATION COLUMN

微信小程序开发

Drinkey / 1830人阅读

摘要:微信小程序创建项目。文件结构小程序包含一个描述整体程序的和多个描述各自页面的。单位和设计图等同大小即可,大小是的一半。

1.微信小程序创建项目。

文件结构:小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 文件 必填 作用 app.js 是 小程序逻辑 app.json 是 小程序公共设置 app.wxss 否 小程序公共样式表 一个小程序页面由四个文件组成,分别是: 文件类型 必填 作用 js 是 页面逻辑...

2.项目启动页

*.json:app.json文件来对微信小程序进行全局配置,决定页面文件的路径、主文件入口、窗口表现、设置网络超时时间、设置多 tab 等,不允许有注释。
配置地址:https://mp.weixin.qq.com/debu...

最外面app.json配置路径默认首页:(路径不需要写文件类型,一个文件夹中的文件都只为一个页面服务,在编写外面css样式中也无需在wxml中引入wxss文件)

{
  "pages":
  [
    "page/welcome/welcome"
  ]
}

pages数组中第一项为启动页面

*.json创建bug:json文件不能为空,至少保留{}
在配置的默认首页中的welcome.wxml文件中编写小程序的tag

welcome.xwml


    
    
    第一个小程序

view:相当于html的div容器
image:等同于img
text:存放文字的标签,如果不加,在手机上无法长按选中文字。
rpx单位:和设计图等同大小即可,大小是px的一半。
page:生成页面后会默认的给最外面加个page标签,相当于html中的body

welcome.wxss

.user-main{
    text-align:center;
}
.user-tx{
    width:200rpx;
    height:200rpx;
    border-radius:50%;
}

什么时候写行内样式,什么时候写wxss中?
在写静态固定的样式时写到外部引入中,经常变化或与行为发生互动的样式可以写到行内。

3.组件-轮播(swiper)


   轮播一
   轮播二
   轮播三

设置轮播图片大小先设置swiper大小然后设置图片大小。

属性
autoplay:自动播放轮播
indicator-dots:是否有点
更多属性参考:http://suo.im/1QzaIi

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50537.html

相关文章

  • 前端资源系列(3)-微信小程开发资源汇总

    摘要:微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者...

    paney129 评论0 收藏0
  • 微信小程开发资源汇总 awesome-wechat-weapp(不定期更新)

    摘要:本文托管在上,不定期更新最后更新时间官方文档小程序开发文档小程序设计指南小程序开发者工具新闻报道微信正式开放内测小程序,不开发的日子真的来了氪关于微信小程序应用号,我能透露的几个细节可能吧你的产品适不适合做微信小程序你需要这篇产品逻 本文托管在github上,不定期更新:justjavac/awesome-wechat-weapp 最后更新时间:2016-09-24 06:22:10 ...

    lscho 评论0 收藏0
  • 微信小程开发由0到1开发,快速开发上线

    摘要:首先先注册微信小程序管理一登录微信公众平台二点击立即注册。注意这里不要用微信公众号登录,小程序账号和微信公众号是不同的。最好从项目直接入手,这里有微信小程序个例子,链接密码有可能会过期,留言或者加我,给你最新的 首先先注册微信小程序管理 一、登录微信公众平台https://mp.weixin.qq.com 二、点击立即注册。 注意:这里不要用微信公众号登录,小程序账号和微信公众号是不...

    seal_de 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<