linux编程闹钟小程序,如何做一个番茄闹钟小程序

一 创建

1. 开发工具下载

2. 创建一个小程序

在开发工具中点击创建小程序，可以得到一个默认目录结构的小程序

3. 目录结构

pages

用于应用视图层的文件夹，便于路由设置

app.js

应用主入口

app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

在pages创建一个新路由可自动生成一个默认的组件，其基本结构如下

home.js:js文件

home.son:组件引用等

.wxml:html文件

wxss：css文件

component

page和component的区别就是，在组件的的json文件中，声明

{

"component":true

}

复制代码

同时js文件中也应该使用Component({...})而不是Page({...})

tabbar

配置相应的路由跳转及图片就可以生成一个菜单栏

二.WXML基本语法

由于使用方法和vue实在相似，仅简单介绍，详见

1. 数据绑定

{{message}}

复制代码

使用 Mustache 语法(双大括号)将变量包起来

2. 列表渲染

{{idx}}: {{itemName.message}}

复制代码

这里的wx:for-index='index和wx:for-item:'item'是默认存在的，可以省略，除非需要声明新变量名

wx:key更vue类似，循环元素需要一个唯一的key作为标识符，方便重渲染

3. 条件渲染

1

2

3

复制代码

还是类似vue的用法

wx:hidden对应v-show，只改变display属性，dom元素未删除

4. 模板

{{index}}: {{msg}}

Time: {{time}}

复制代码

可以直接获取到传入对象的属性

Page({

data: {

item: {

index: 0,

msg: 'this is a template',

time: '2016-09-15'

}

}

})

复制代码

使用is来判断渲染的模板

复制代码

同时支持条件渲染

5.引用

1. import

{{text}}

复制代码

复制代码

多级嵌套引用，只能访问到直接引用的template元素

2. include

include 可以将目标文件除了 外的整个代码引入，相当于是拷贝到 include 位置

body

复制代码 header

复制代码

6. class

{{text}}

复制代码

动态绑定的class在条件判断中，class必是String类型

三. WXS

1. props

组件如何接受外部变量

properties:{

text:{

type:String,

value:''

},

type:{

type:String,

value:''

},

size:{

type:String,

value:''

}

}

复制代码

使用的是properties

2.data

通过this.data.xx访问变量

3.setData

这点与react类似，在改变data时要通过

this.setData({newData})

复制代码

这也是数据相应的需要

4. methods

声明函数，在Page中，函数无需写在此对象中

5. 组件通信

//子组件

confirm(){

this.triggerEvent('confirm',this.data.value)

},

复制代码//父组件

复制代码

使用bindEvnt来监听事件并触发相应操作

6. 双向绑定

复制代码Component({

data:{

value:''

}

methods:{

watchValue(event){

this.data.value = event.detail.value

}

}

})

复制代码

通过event获取到输入事件，通过查看其结构可以得知，输入框内容在detail.value此属性下

这里与vue的v-model类似，这一系列操作可以通过model:value简化

复制代码

所以接触过vue的同学上手小程序应该非常简单

四.如何登录

五.授权登录

由于微信的有关规定，某些接口的调用需要用户授权

open-type="getUserInfo"

bindgetuserinfo='login'

withCredential='true'>

登录

复制代码

当我们第一次调用getUserInfo这个api需要弹出授权窗口

onLoad: function() {

let that=this

wx.getSetting({

success: function(res) {

if (res.authSetting['scope.userInfo']) {

wx.getUserInfo({

success: function(res) {

wx.getUserInfo({

complete: (res) => {that.wxLogin(res.encryptedData,res.iv)},

})

}

});

}

}

})

}

复制代码

在onload中调用wx.getSetting，检测userInfo是否被授权，如果授权信息已存在我们直接用返回参数来登录

login(event){

if (event.detail.userInfo) {

let encrypted_data = event.detail.encryptedData

let iv = event.detail.iv

this.wxLogin(encrypted_data,iv)

}else {

//用户按了拒绝按钮

wx.showModal({

title: '警告',

content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',

showCancel: false,

confirmText: '返回授权',

success: function(res) {

if (res.confirm) {

return

}

}

})

}

}

复制代码

否则我们在登录button上的getUserInfo上绑定一个事件，当用户点击就会弹出授权窗口，若用户点击授权，则可以得到UserInfo，调用登录方法，如果拒绝则提醒用户必须授权