请选择 进入手机版 | 继续访问电脑版

微信小程序开发基础

[复制链接]
林雨宣 发表于 2021-1-2 19:47:28 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
微信小步伐开辟根本



小步伐根本

小步伐框架

框架全局设置文件、工具类文件和框架页面文件
框架全局设置文件:

  由根目次下的app.js app.json app.wxss组成
app.js界说全局数据和函数使用,格式为:
  1.   App({    onLaunch: function () {    //生命周期函数。此为小步伐初始化函数  if (!wx.cloud) {    console.error('请使用 2.2.3 或以上的根本库以使用云本事')  } else {    wx.cloud.init({      traceUser: true,    })  }  this.globalData = {}},getUserInfo:function(){    //自界说的全局函数    //do things},globalData:{        //界说全局变量  userInfo:"xxx",  other:null}})
复制代码
  app.json全局设置文件可以设置5个功能:设置页面路径,设置窗口体现,设置标签导航,设置网络超时和设置debug模式:
  1.     {  "pages": [    //设置页面路径,设置好之后会直接生产对应的文件和文件夹    "pages/index/index",    "pages/userConsole/userConsole",    "pages/storageConsole/storageConsole",    "pages/databaseGuide/databaseGuide",    "pages/addFunction/addFunction",    "pages/deployFunctions/deployFunctions",    "pages/chooseLib/chooseLib"  ],  "window": {    //设置窗口体现    "backgroundColor": "#F6F6F6",    //窗口配景致    "backgroundTextStyle": "light",    //下拉配景字体或文本样式    "navigationBarBackgroundColor": "#F6F6F6",    //导航配景致    "navigationBarTitleText": "云开辟 QuickStart",    //导航条文字    "navigationBarTextStyle": "black"    //导航条文字颜色  },  "tabBar":{    //设置标签导航  "selectColor":"#FFFFFF",   //标签导航选中时文字颜色  "backgroundColor":"#F5F5F5",        //标签导航配景致  "borderStyle":"white",        //标签导航上边框颜色    "list":[{      "pagePath":"pages/index/index",    //页面跳转路径      "text":"首页" ,     //标签导航名称      "iconPath":"" ,//默认时图标      "selectedIconPath":""    //选中时图标    },{      "pagePath":"pages/logs/logs",      "text":"日志"    }]  },  "networkTimeout":{    //设置网络超时    "request":10000,    "downloadFile":10000  },  "debug":true    //设置debug模式}
复制代码
  app.wxss 小步伐公共样式文件,对css样式举行了扩展,兼容大部门css样式,页面的样式优先级高于全局样式
工具类文件:utils文件夹用于存放工具类的函数。界说完函数之后要通过
module.exports将界说的函数名称举行注册,这样在其他页面才华使用。
  1.     module.expors={        myfunctionName: functionNameInUtils    }
复制代码
App():注册步伐函数

  生命周期函数:
  1.    onLaunch()    // 监听小步伐初始化    onShow()       //监听小步伐显示    onHide()        //监听小步伐隐藏    onError()        //错误监听
复制代码
  1. 注意:不要再界说于App()内的函数中调用getApp(),使用this就可以获取app实例,不要私自调用生命周期函数
复制代码
Page():注册页面函数

  生命周期函数:
  1.     onload()        //监听页面加载    onReady()        //监听页面初次渲染完成状态    onShow()        //监听页面显示    onHide()        //监听也页面隐藏    onUnload()        //监听页面卸载
复制代码
视图层:

  js中Page下的data数据可以在页面中使用{{name}} 直接显示
{{}}中可以举行简单运算:三元,数学,逻辑,字符串运算,数据路径运算
条件渲染:
  wx:if 判断单个组件
  1. 1    //判断是否需要渲染代码块2    //else if3    //else
复制代码
  wx:if 判断多个组件
使用 标签包裹需要判断的组件 在block中判断
列表渲染:

  wx:for 列表渲染单个组件
  1.     //默认数组当前项下标为index 当前项变量名为item    {{index}}: {{item.message}}//但是可以使用wx:for-index="myIndex"指定index,wx:for-item="MyItem" 指定item
复制代码
  block wx:for 列表渲染多个组件
  1.     {{index}}:    {{item.message}}
复制代码
  wx:key 指定唯一标识符:列表会动态改变,而且希望列表中的项目保持自己的特征和状态。数组中wx:key指定字段对应的值唯一且不能动态改变。
模板 代码块的复用
使用is属性来指定模板,data属性来传入数据,is可以使用三元运算符动态以为渲染哪个模板
引用

  import 引用:引用另一个wxml里的模板组件
include 引用:导入另一个wxml里除了模板的其他组件(和jsp里的include动作很像)

来源:https://blog.csdn.net/lamperouge_conan/article/details/112055241
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )