用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 入门系列 查看内容

微信小程序初接触

天下雪 2017-1-12 00:26

作者:royluck,来自他的博客:http://www.jianshu.com/p/f4f48d026e96项目结构:(分为全局结构和局部结构)微信自动生成项目==全局结构:上述结构是微信小程序创建项目时,自动生成的项目结构,其中的app.json、ap ...

作者:royluck,来自他的博客:http://www.jianshu.com/p/f4f48d026e96

项目结构:(分为全局结构和局部结构)

微信自动生成项目

==>全局结构:

上述结构是微信小程序创建项目时,自动生成的项目结构,其中的app.jsonapp.jsapp.wxss都是全局文件,即在上述三个文件不管修改的是样式还是动作,都可以在全局中调用。

app.js:为动作文件,定义相关js函数

app.json:为环境文件,配置相关环境(注:app.json文件内容即使为空,也必须加" {  } "符号,否则报错)

app.wxss:为样式文件,相当于css文件

utils文件:可以理解为时间插件文件,输出相关时间格式

==>局部结构:(创建单页)

快速创建单页结构的方法:在全局的app.json文件中,定义如下变量然后保存,即可自动创建单页结构。

上述pages数组中,单页的申明(哪个路径排在第一,刷新后呈现的为这个路径文件)

单页结构

sign.wxml:为结构文件,相当于html文件


js、json、wxml、wxss:

==>js:

状态机

==>app.json(全局环境配置):

定义页面底部目录栏目


  1. ...,
  2. "tabBar": {
  3. "list": [{
  4. "pagePath": "pages/index/index", //路径文件
  5. "text": "效果图", //目录名称
  6. "iconPath": "../../images/icon_API.png", //图标(未被选中)
  7. "selectedIconPath": "../../images/icon_API_HL.png"
  8. //图标(被选中)
  9. },{
  10. "pagePath": "pages/todos/todos",
  11. "text": "TodoApp",
  12. "iconPath": "../../images/icon_API.png",
  13. "selectedIconPath": "../../images/icon_API_HL.png"
  14. },{
  15. "pagePath": "pages/Me/index",
  16. "text": "Me",
  17. "iconPath": "../../images/icon_API.png",
  18. "selectedIconPath": "../../images/icon_API_HL.png"
  19. }]
  20. }

列表渲染 wx:for

官网手册


index.js

index.wxml

效果图

条件渲染 wx:if


  1. wx:if
  2. wx:elif
  3. wx:else

  1. <view wx:if={{length>5}} >1</view>
  2. 邀请
鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: royluck 来自: 原文地址

相关阅读