微信小程序学习用:简易微信小程序:学习第一天第二天[小鱼微信小程序]

微信小程序学习用:简易微信小程序:学习第一天第二天由小鱼微信小程序精心整理,并分享给大家。喜欢该资源的小伙伴请下载使用,注册、回复、每日签到、点赞送大量积分,满足您免费下载的愿望

第一天全局入口文件

  • 程序入口文件是 app.js,内容可以为空
  • 程序全局信息在 app.json 里配置,包括:路由,界面颜色
  • 程序全局样式在 app.wxss 里配置,内容可以为空

pages 目录pages/index/index.js

[AppleScript]
let param = {               // param 这个名字随便取   data : {                  // data 是固定的,不能修改     myText : '你好,代码!'   // myText 这个名字随便取,对应上 wxml 里的名字就行   } };  Page(param);                // Page 是固定的,不能修改



pages/index/index.wxml<view class="container">  <text class="text-label">{{myText}}</text></view>

view 相当于 div,text 相当于 span。

{{myText}} 用两个大括号来显示 js 文件里的 myText 值

pages/index/index.wxss

就是作用于当前 index 页面的样式文件

第二天导航

  • WXML导航,打开新页面
    [AppleScript]
    <navigator url="../product/index?title=我是title参数" > 

  • WXML导航,直接打开页面(redirect)
    [AppleScript]
    <navigator url="../product/index?title=我是title参数" redirect>


  • js 代码导航,打开新页面
    [AppleScript]
    wx.navigateTo({   url: 'index?title=我是title参数' })


  • js 代码导航,直接打开页面(redirect)
    [AppleScript]
    wx.redirectTo({   url: 'index?title=我是title参数' })


  • js 代码后退导航
    [AppleScript]
    wx.navigateBack({   delta: 1 })



导航参数

  • 接收参数

在页面的 onLoad 事件里接收上

onLoad(options) { this.setData({ title: options.title }) }

  • 赋值(跟 React 类似,React是 this.setState(…))
    [AppleScript]
    this.setData({   title: options.title })



页面生命周期

  • onLoad: 页面加载

    • 一个页面只会调用一次。
    • 接收页面参数可以获取wx.navigateTo和wx.redirectTo及中的 query。
  • onShow: 页面显示

    • 每次打开页面都会调用一次。
  • onReady: 页面初次渲染完成

    • 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
    • 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
  • onHide: 页面隐藏

    • navigateTo或底部tab切换时调用(页面切换)。
  • onUnload: 页面卸载

    • 当redirectTo或navigateBack的时候调用。

项目地址:https://github.com/Kennytian/MiniWeApp项目下载: 微信小程序学习用:简易微信小程序:学习第一天第二天 MiniWeApp-master.zip (195.21 KB, 下载次数: 7)

小鱼源码网www.51xyyx.com

轻松一刻:

老公这两天有点嚣张,总对我指指点点的,昨晚我趁他不注意给钱包装两个套套。 今天早上上班的时候我说要点钱,结果就翻出了套套,终于翻身了!果断发飙~
 下载地址
登录  查看下载地址。

提示:注册,评论,每日签到,点赞可获得积分。

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 2805477110@qq.com

周一至周六,8:00-21:00,节假日休息
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
切换注册

登录

忘记密码 ?

切换登录

注册