小程序学习之路三：简单功能实现

上一篇讲解小程序学习之路二：开发工具部分功能和项目结构介绍，本篇就开始进入正题了，在代码中实现简单功能

1. 添加一个控件view
2. 修改控件view的样式显示
3. 添加控件的点击事件
4. 实现小程序的吐司功能
5. 实现点击后页面跳转

虽然都是基础，但是也能简单入个门

一个个来，首先我添加了一个控件view

 第一步：添加代码  {{motto}}

第二步：设置文字，可以看到在index.js文件里面有这样的数据，我们引用过来，当然也可以自己定义一个，比如我的test

 下面来实现第二个，设置这个view的样式

在index.wxss文件里面设置，我的这个是添加了一个margin-top值和color，其他的看需求再加，每项分号隔开

                   效果图

简单 样式设置好了后再来添加一个点击事件并且弹出吐司

首先在js里面添加一个事件处理的函数bindtextTest，然后在view里面去引用这个函数 bindtap='bindtextTest'，下面是代码展示

这样就实现了一点点击事件了，下面我再加上吐司

首先你需要在data中定义是否显示吐司，不设置你会发现吐司一直在

接下来 你需要添加吐司的监听onToastChanged和数据设置，可以直接在点击事件里面设置

好了，接下来看结果 ，我点击helloworld之后弹出吐司

接下来是最后一个，跳转到新界面

首先我新建了一个页面目录test，同时新建了四个文件js,wxml,wxss,json，都取名为test

然后在app.json里面注册了这个页面（我是Android开发的，所以页面习惯说注册）

然后我在test.wxml里面添加了一个view，显示我跳转过去的

现在我点击跳转到测试页面

你可以看到新界面

为了大家便于理解，我上上我的test页面代码，新学，可能有些细节没注意到，求指教，虚心学习

首先是test.js

//获取应用实例
const app = getApp()

Page({
  data: {
    test: 'wishing测试页面',
    toastHidden: true, //吐司
    toastText: '',//吐司文本
  }
})

test.json里面就只有一个{}

testwxml

  
    {{test}}
  

test.wxss

.testinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.usertest {
  color: red
}

 好了，至于里面有些属性，我目前也不清楚，学了之后再讲解