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

Neo不想说话97906
1,792 阅读4分钟

一 创建

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. 数据绑定

<view> {{message}} </view>

使用 Mustache 语法（双大括号）将变量包起来

2. 列表渲染

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

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

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

3. 条件渲染

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

还是类似vue的用法

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

4. 模板

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

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

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

<template is="msgItem" data="{{...item}}"/>

使用is来判断渲染的模板

<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>

同时支持条件渲染

5.引用

1. import

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

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

2. include

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

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>

<view> header </view>

6. class

<button class="tomato-button {{type==='default'?'default':'change'}} {{size==='mini'&&'mini'}}">{{text}}</button>

动态绑定的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)
      },

//父组件
 <t-confirm  bindconfirm="confirmCreate" ></t-confirm>

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

6. 双向绑定

 <textarea placeholder="{{placeholder}}" bindinput="watchValue" value="{{value}}"></textarea>

Component({
  data:{
      value:''
  }
    methods:{
    watchValue(event){
        this.data.value = event.detail.value
    }
   }
})

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

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

<textarea placeholder="{{placeholder}}"  model:value="{{value}}"></textarea>

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

四.如何登录

单独写一篇介绍

五.授权登录

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

<button class='loginButton'
        open-type="getUserInfo"
        bindgetuserinfo='login'
        withCredential='true'>
        登录
</button>

当我们第一次调用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，调用登录方法，如果拒绝则提醒用户必须授权

avatar
文章
阅读
粉丝