微信小程序

小程序简介

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

小程序配置

全局配置

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

完整配置项说明请参考小程序全局配置 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

以下是一个包含了部分常用配置选项的 app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}

页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
完整配置项说明请参考 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
例如：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

小程序组件

小程序For 循环

wx:for = "变量" 小程序循环 item为微信封装的

<view wx:for="{{students}}">{{item.name}}-{{item.age}} </view>

获取用户信息

.wxml
<button size="mini" open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo" >获取</button>
.js
  handleGetUserInfo(event){
    console.log(event)
  },

open-data 组件

type 的合法值

值	说明	最低版本
groupName	拉取群名称	1.4.0
userNickName	用户昵称	1.9.90
userAvatarUrl	用户头像	1.9.90
userGender	用户性别	1.9.90
userCity	用户所在城市	1.9.90
userProvince	用户所在省份	1.9.90
userCountry	用户所在国家	1.9.90
userLanguage	用户的语言	1.9.90

wxss 尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
Phone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

wxss 导入样式

@import '路径';
@import 'app.wxss';

时间运用

.wxml

<view>{{nowTime}}</view>
.js
  data: {
    nowTime: new Date().toLocaleString()
  },
  onLoad: function (options) {
    setInterval(() =>{
      this.setData({
        nowTime: new Date().toLocaleString()
      })
    },1000)
  },

判断运算

？成立：不成立
{{age >= 18 ? '成年人': '未成年人'}}

内容隐藏

 <view wx:if="{{false}}">哈哈哈</view>
 hidden 隐藏的组件时存在的 相当与display : no
 <view hidden='{{true}}'>呵呵</view>

带变量的模板

<template name="模板名">
  <button size="mini">{{btntext}}</button>
</template>

<template is="模板名" data="{{btntext: '按钮'}}"></template>

可通过模板路径导入(import 不可逐级导入)
绝对路径

<import  src="/templates/button.wxml"/>

相对路径

<import  src="../../templates/button.wxml"/>

<include /> (也可以导入 相当与拷贝.wxml文件) (可逐级循环导入 类似时 父文件 导入 --> 子文件 也可以导入 --> 子文件)
<include src="/templates/button.wxml" />