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

Vincent：微信小程序实战教程《三》第一个微信小程序

发布：2018-03-24 15:35浏览：次来源：网络作者：tianshu

准备好开始我们第一个微信小程序了吗？

创建我们的工程

Vincent：微信小程序实战教程《三》第一个微信小程序(图1)

getApp()

var app = getApp()获取到当前小程序实例对象,可用此实例对象访问到全局变量和当前页面实例(后面会讲解)

1

2

3

4

console.log(app.getCurrentPage())

console.log(app.globalData)

Page()函数的介绍

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等

在index.js中键入如下代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

//获取应用实例

var app = getApp()

Page({

data: {

name: "vincent",

description: "a developer for html5 and iOS",

text: "待我代码编成,娶你为妻可好",

},

//开始加载数据

onLoad: function(options) {

console.log("onLoad")

var that = this

//当我们创建完程序后，在app.js中就有一个getUserInfo方法，我们用app实例调用getUserInfo方法获取当前用户信息，并赋值给userInfo

app.getUserInfo(function(cur_userInfo){

//获取到当前用户信息cur_userInfo赋值给页面变量userInfo

userInfo:cur_userInfo

})

})

},

onReady: function() {

console.log("onReady")

},

onShow: function() {

console.log("onShow")

},

onHide: function() {

console.log("onHide")

},

onUnload: function() {

console.log("onUnload")

},

})

在index.wxml中键入如下代码：

1

2

3

4

5

6

7

8

9

10

<view class="container">

<view bindtap="bindViewTap" class="userinfo">

<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

<text class="userinfo-nickname">{{name}}</text>

<text class="userinfo-nickname">{{description}}</text>

</view>

<view class="usermotto">

<text class="user-motto">{{text}}</text>

</view>

</view>

###本文代码请查看此目录下面的 wx2 文件夹

wechatpra-master.zip

上一篇：Vincent：微信小程序实战教程《二》全局配置之app.j

下一篇：伊尔今夏：iOS 开发的微信小程序初体验

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

相关文章

最新文章

微信小程序app.json文件常用配置说明

日期：2021-07-09 浏览：2234次
微信小程序文字控制单行超过显示省略号

日期：2021-07-09 浏览：709次
微信小程序参数传递的几种方法

日期：2021-07-09 浏览：3559次
微信小程序使用button按钮分享

日期：2021-07-09 浏览：764次
微信小程序的setData

日期：2021-07-09 浏览：653次

推荐文章

随机文章

热门小程序