欢迎光临,了解微信小程序开发,就上易用通!

微信小程序初接触

发布:2018-02-03 11:12浏览: 来源:网络 作者:cola

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

微信小程序初接触(图1)

微信自动生成项目

==>全局结构:

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

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

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

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

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

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

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

微信小程序初接触(图2)

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

微信小程序初接触(图3)

单页结构

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


js、json、wxml、wxss:

==>js:

微信小程序初接触(图4)

状态机

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

定义页面底部目录栏目

微信小程序初接触(图5)

 

 


	
  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

微信小程序初接触(图6)

官网手册
微信小程序初接触(图7)

微信小程序初接触(图8)

index.js

微信小程序初接触(图9)

index.wxml

微信小程序初接触(图10)

效果图
 

条件渲染 wx:if

 

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


	
  1. <view wx:if={{length>5}} >1</view>





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。