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

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

第一天全局入口文件

  • 程序入口文件是 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来减少垃圾评论。了解我们如何处理您的评论数据

精品源码,商业服务,发布得积分,VIP免费下

开通会员 发布资源