[移动开发]微信小程序总结(阶段第一次总结)

目录

微信小程序第一阶段总结

一、小程序代码构成介绍

二、小程序配置

三、事件处理及渲染

四、组件

五、云开发

六、（城建表白墙）

微信小程序总结(阶段第一次总结)

一、小程序代码构成介绍

1、JSON配置

在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json。

（1）app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

{
 ?"pages":[ ?//pages用于描述当前小程序所有页面路径
 ? ?"pages/index/index", ?//在这里写上页面的路径并保存将会自动的创建页面文件
 ? ?"pages/logs/logs"
  ],
 ?"window":{ ?//window定义小程序所有页面的顶部背景颜色，文字颜色定义等
 ? ?"backgroundTextStyle":"light", ?//背景文本样式
 ? ?"navigationBarBackgroundColor": "#fff", ?//导航栏背景颜色
 ? ?"navigationBarTitleText": "Weixin", ?//导航栏标题文本
 ? ?"navigationBarTextStyle":"black" ?//导航栏文本样式
  }
}

（2）页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

举个例子，如果你想整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。但需求真的只有这点吗?

实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

2、wxml

• 小程序的wxml类似于html，但是又不像html那样有<h1>、<span>多种元素，wxml只有<view>(相当于div)、<text>(相当于h1,h2等文本元素)、<input>、<button>、<image>等等，还提供了地图、视频、音频等等组件能力。

<view></view>
<text></text>
<input></intput>
<button></button>
<image></image>
<audio></audio>
<video></video>
<map></map>

• 还多了一些 wx:if 这样的属性以及 {{ }} 这样的插值表达式，类似于:

<text>{{msg}}</text>

3、wxss样式

• WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。新增了尺寸单位rpx，该尺寸单位是根据手机设备的屏幕会有不同的宽度和设备像素比，来采用一些技巧来换算一些像素单位。

• 还提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

4、JS逻辑交互

只写静态页面肯定是不够的，所以还需要编写动态页面和用户做交互：响应用户的点击、获取用户的位置等等。

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是在 button 上声明一个属性: bindtap来绑定一个时间 ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

Page({
 ?clickMe: function() {
 ? ?this.setData({ msg: "Hello World" })
  }
})

5、整个项目结构

Page({
?
 ? ?/**
 ? ? * 页面的数据
 ? ? */
 ? ?data: {
?
 ?  },
?
 ? ?/**
 ? ? * 页面加载时触发，且只发生一次，有些数据实时性要求不高可以onlaod里面触发对应的请求
 ? ? */
 ? ?onLoad: function (options) {
?
 ?  },
?
 ? ?/**
 ? ? * 页面初次渲染之后触发（只是初次，下一次页面渲染就没他什么事），只触发一次。你发送请求其实也可以把它当做onload毕竟也只是一次，但是你涉及到一些渲染的东西要注意了，设置页面标题之类的要在他之后再用
 ? ? */
 ? ?onReady: function () {
?
 ?  },
?
 ? ?/**
 ? ? * 定义是页面显示，切入前台时触发，用我自己的见解就是这个页面出现一次，他就被调用一次包括你前进后退到这个页面
 ? ? */
 ? ?onShow: function () {
?
 ?  },
?
 ? ?/**
 ? ? * 在onHide里面写一个简单的打印函数，切换页面的时候你就会发现该函数被调用。你可以通过这个Hide的词来理解，这个页面切换到别的页面就会触发
 ? ? */
 ? ?onHide: function () {
?
 ?  },
?
 ? ?/**
 ? ? * 点左上角返回时执行
 ? ? */
 ? ?onUnload: function () {
?
 ?  },
?
 ? ?/**
 ? ? * 监听用户下拉动作，当用户下拉时执行
 ? ? */
 ? ?onPullDownRefresh: function () {
?
 ?  },
?
 ? ?/**
 ? ? * 页面上拉触底事件的处理函数
 ? ? */
 ? ?onReachBottom: function () {
?
 ?  },
?
 ? ?/**
 ? ? * 用户点击右上角分享时触发
 ? ? */
 ? ?onShareAppMessage: function () {
?
 ?  },
?
 ? ?/**
 ? ? * 页面尺寸变化时执行
 ? ? */
 ? ?onPageScroll: function() {
 ?
    },
 ? ?
 ? ?/**
 ? ? * 页面尺寸变化时执行
 ? ? */
    onResize: function() {
?
    },
 ? ?
})

二、小程序配置

1、全局配置

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

{
 ?"pages": [ ?//pages页面路径
 ? ?"pages/index/index",
 ? ?"pages/logs/index"
  ],
 ?"window": { ?//窗口
 ? ?"navigationBarTitleText": "Demo"
  },
 ?"tabBar": { ?//导航条
 ? ?"color": "#fff00", ?//仅支持16进制
 ? ?"selectedColor": "#cffff",
 ? ?"backgroundColor": "#c66ff",
 ? ?"borderStyle": "white" ?//边框样式只有white / block
 ? ?"position": "bottom" ?//tabBar 的位置，仅支持 bottom / top
 ? ? ?
 ? ?"list": [ ?//最少 2 个、最多 5 个 tab
 ? ? ?  {
 ? ? ? ? ?"pagePath": "pages/index/index", ?//页面路径
 ? ? ? ? ?"text": "首页",
 ? ?     ?"iconPath": "你的路径" ?//当 position 为 top 时，不显示 icon，icon 大小限制有限制，不支持网络图片
 ? ?     ?"selectedIconPath": "你的路径" ?//被选中时显示的icon
 ?      }, 
 ? ? ?  {
 ? ? ? ? ?"pagePath": "pages/logs/index",
 ? ? ? ? ?"text": "日志"
 ?      }
 ?  ]
  },
 ?"networkTimeout": { ?//设置超时时间
 ? ?"request": 10000, ?//请求超时
 ? ?"downloadFile": 10000
  },
 ?"debug": true
}

2、页面配置

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。

注意页面中配置项在当前页面会覆盖 app.json 中相同的配置项。

三、事件处理及渲染

<text>{{text}}</text>
<text>{{inputValue}}</text>
<intut type="text" bindinput="bi">
<button bindtap="viewTap">点击显示</button>

 ?data: {
 ? ?text: '',
 ? ?inputValue: ''
  },
 ? ? ?
 ?// 事件响应函数
 ?viewTap: function() {
 ? ?this.setData({
 ? ? ?text: 'Set some data for updating view.'
 ?  }, function() {
 ? ? ?// 回调函数
 ?  })
  },
 ?
 ?//从前台input获取到value并赋值个data的inputValue
 ?bi: function(e) {
 ? ? ?this.setData({
 ? ? ? ? ?inputValue: e.detail.value
 ? ?  })
  }

四、组件

1、autio音频

<!-- audio.wxml -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>
?
<!-- poster默认控件上的音频封面的图片资源地址 -->
<!-- name歌名 -->
<!-- author歌手 -->
<!-- controls显示，不设置的话就不显示，所以一般都设置 -->
<!-- loop重复播放 -->
?
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>

// audio.js
Page({
 ?onReady: function (e) {
 ? ?// 使用 wx.createAudioContext 获取 audio 上下文 context，放在这里目的是页面初始渲染时就获取
 ? ?this.audioCtx = wx.createAudioContext('myAudio')
  },
 ?data: {
 ? ?poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
 ? ?name: '此时此刻',
 ? ?author: '许巍',
 ? ?src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
  },
 ?audioPlay: function () {
 ? ?this.audioCtx.play() ?//播放
  },
 ?audioPause: function () {
 ? ?this.audioCtx.pause() ?//暂停
  },
 ?audio14: function () {
 ? ?this.audioCtx.seek(14) //跳到14秒处
  },
 ?audioStart: function () {
 ? ?this.audioCtx.seek(0) ?//回到开头
  }
 ? ?
 ?//bindtimeupdate函数当播放进度改变时触发
 ?//bindended函数当播放到末尾时触发
})

2、audio视频

<!--pages/video/video.wxml-->
<video src="cloud://cloud1-1gb8gneg30c0417b.636c-cloud1-1gb8gneg30c0417b-1309767489/shipin.mp4" danmu-list="{{danmu}}" loop="true" id="myVideo"></video>
?
<!-- loop="true" 设置重复播放 -->
<!-- danmu-list 设置弹幕 -->
?
<input type="text" placeholder="请输入弹幕" />
?
<button type="primary" bindtap="send">发布弹幕</button>

data: {
 ? ?danmu: [
 ? ?  {
 ? ? ? ?text: '吐槽', //弹幕文本内容
 ? ? ? ?color: 'pink', ?//字体颜色
 ? ? ? ?time: 3 //弹出时间
 ? ?  },
 ?  ],
  }

五、云开发

1、资源存储

2、数据存储

六、（城建表白墙）

1、wxml

2、wxss

3、js

// pages/list/list.js
var util = require('../../utils/utils')
Page({
?
 ? ?/**
 ? ? * 页面的初始数据
 ? ? */
 ? ?data: {
 ? ? ? ?list: [
 ? ? ? ? ?  {
 ? ? ? ? ? ? ? ?// con: '',
 ? ? ? ? ? ? ? ?// date: ''
 ? ? ? ? ?  }
 ? ? ?  ]
 ?  },
?
 ? ?getcon: function(e) {
 ? ? ? ?this.setData({
 ? ? ? ? ? ?con: e.detail.value
 ? ? ?  })
 ?  },
?
 ? ?send: function(e) {
 ? ? ? ?const db = wx.cloud.database()
 ? ? ? ?var con = this.data.con;
 ? ? ? ?var time = util.formatTime(new Date());
 ? ? ? ?db.collection('danmu').add({
 ? ? ? ? ? ?data: {
 ? ? ? ? ? ? ? ?con: con,
 ? ? ? ? ? ? ? ?date: time
 ? ? ? ? ?  },
 ? ? ? ? ? ?success: function(res) {
 ? ? ? ? ? ? ? ?// console.log(res);
 ? ? ? ? ?  }
 ? ? ?  })
 ? ? ? ?this.setData({
 ? ? ? ? ? ?con: ''
 ? ? ?  })
 ? ? ? ?this.queryDanmu()
 ?  },
?
 ? ?queryDanmu: function() {
 ? ? ? ?// const list = []
 ? ? ? ?const db = wx.cloud.database()
 ? ? ? ?db.collection('danmu').where({
 ? ? ? ? ? ?_openid: 'oRR_B5UdkAsG3i1nvQ4XeA4Sb7ok'
 ? ? ?  }).field({
 ? ? ? ? ? ?_id: false,
 ? ? ? ? ? ?_openid: false
 ? ? ?  }).get().then(res => {
 ? ? ? ? ? ?// console.log(res.data);
 ? ? ? ? ? ?this.setData({
 ? ? ? ? ? ? ? ?list: res.data
 ? ? ? ? ?  })
 ? ? ?  })
 ? ? ? ?// console.log(this.data.list);
 ?  },
?
 ? ?/**
 ? ? * 生命周期函数--监听页面加载
 ? ? */
 ? ?onLoad: function (options) {
 ? ? ? ?
 ?  },
?
 ? ?/**
 ? ? * 生命周期函数--监听页面初次渲染完成
 ? ? */
 ? ?onReady: function () {
 ? ? ? ?
 ?  },
?
 ? ?/**
 ? ? * 生命周期函数--监听页面显示
 ? ? */
 ? ?onShow: function () {
 ? ? ? ?this.queryDanmu()
 ?  }
})

目前还在学习中······

写得不好的地方希望能够指出。