AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:02:03

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序学习第一天,第二天
相关的资讯,希望对您有帮助。

微信小程序学习第一天,第二天

第一天全局入口文件程序入口文件是 app.js,内容可以为空程序全局信息在 app.json 里配置,包括:路由,界面颜色程序全局样式在 app.wxss 里配置,内容可以为空pages 目录pages/index/index.jslet param = { // para ...

第一天

全局入口文件

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

pages 目录

pages/index/index.js

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 相当于 divtext 相当于 span

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

pages/index/index.wxss

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

第二天

导航

  1. WXML导航,打开新页面
<navigator url=../product/index?title=我是title参数 >
  1. WXML导航,直接打开页面(redirect
<navigator url=../product/index?title=我是title参数 redirect>
  1. js 代码导航,打开新页面
wx.navigateTo({
  url: index?title=我是title参数
})
  1. js 代码导航,直接打开页面(redirect
wx.redirectTo({
  url: index?title=我是title参数
})
  1. js 代码后退导航
wx.navigateBack({
  delta: 1
})

导航参数

  1. 接收参数

在页面的 onLoad 事件里接收上

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

  1. 赋值(跟 React 类似,React是 this.setState(...))
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
demo文件下载:MiniWeApp-master.zip

145阅读 | 0评论
你的回应
写文章

6947