不凡学院前端100天

# 小程序的使用

# 1.小程序的开发准备

# 1.1 注册账号

  • 注册小程序开发账号

  • 激活邮箱(注意:一个邮箱只能绑定一个微信公众平台或者开放平台,不能是个人微信号绑定的邮箱)

  • 信息登记

    • 个人主体小程序没有微信支付、微信卡包和附近的小程序等功能

  • 登录小程序管理后台

    • 完善小程序信息(一个账号只能添加五个类目)

  • 绑定开发者(多人协同开发)

  • 小程序的版本

    预览 === 开发版本 ---> 上传 ===> 体验版本 ---> 审核 ===> 线上版本

# 1.2 下载开发者工具(小程序开发文档中有下载地址)

# 1.3 小程序代码结构和基本配置介绍

  • pages

    微信小程序所有的页面每一个页面包括 js 页面逻辑 、 json 单个页面的配置 、wxml 页面内容 、wxss 样式

    pages文件夹里是小程序的各个页面，每个界面一般都由.wxml、.wxss、.js、.json四个文件组成，四个文件必须是相同的名字和路径

    • .js 是页面的脚本代码，通过Page()函数注册页面。可以指定页面的初始数据、生命周期、事件处理等

    • .wxml 是页面的布局文件，只能使用微信定义的组件

    • .wxss 是样式表

    • .json 页面配置文件，设置与

  • utils

    工具类,复用的 js 代码模块

    js 模块通过module.exports对外暴露接口，其它使用的地方通过 var utils = require('../../utils/util.js') 进行引用

  • app.js 监听并处理小程序的生命周期、声明全局变量

    页面的.js文 件可以通过var app = getApp() 获取其实例，调用其中定义的方法和变量，但不可以调用生命周期的方法

  • app.json 小程序全局配置

    // app.json 配置介绍
"pages": [ // 配置小程序的组成页面，第一个代表小程序的初始页面
  "pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合
  "pages/logs/logs"
],
"window": { // 设置小程序的状态栏、标题栏、导航条、窗口背景颜色
  "navigationBarBackgroundColor": "#ffffff", //顶部导航栏背景色
  "navigationBarTextStyle": "black", //顶部导航文字的颜色 black/white
  "navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字
  "backgroundColor": "#eeeeee", //窗口的背景色
  "backgroundTextStyle": "light", //下拉背景字体、loading 图的样式，仅支持 dark/light
  "enablePullDownRefresh": "false"， //是否支持下拉刷新 ，不支持的话就直接不写！
  "disableScroll": true, //  设置true不能上下滚动，true/false，注意！只能在 page.json 中有效，无法在 app.json 中设置该项。
},
"tabBar": { //底部tab或者顶部tab的表现，是个数组，最少配置2个，最多5个
    //只有定义为 tabBar 的页面，底部才有 tabBar
  "list": [{ //设置tab的属性，最少2个，最多5个
    "pagePath": "pages/index/index", //点击底部 tab 跳转的路径
    "text": "首页", //tab 按钮上的文字
    "iconPath": "../img/a.png", //tab图片的路径，本地路径
    "selectedIconPath": "../img/a.png" //tab 在当前页，也就是选中状态的路径
  }, {
    "pagePath": "pages/logs/logs",
    "text": "日志"
  }],
  "color": "red", //tab 的字体颜色
  "selectedColor": "#673ab7", //当前页 tab 的颜色，也就是选中页的
  "backgroundColor": "#2196f3", //tab 的背景色
  "borderStyle": "white", //边框的颜色 black/white
  "position": "bottom" //tab处于窗口的位置 top/bottom
  },
"networkTimeout": { //默认都是 60000 秒一分钟
    "request": 10000, //请求网络超时时间 10000 秒
    "downloadFile": 10000， //链接服务器超时时间 10000 秒
    "uploadFile": "10000", //上传图片 10000 秒
    "downloadFile": "10000" //下载图片超时时间 10000 秒
  },
"debug": true //项目上线后，建议关闭此项，或者不写此项

  • app.wxss

    小程序全局样式(引入外部样式的时候只在这里面引入即可)

  • project.config.json

    微信开发者工具的配置信息

  • siteMapLocation 详情参见此处 一般不用更改,在此不做说明

注意: 定义在app.wxss中的全局样式，作用于每个页面。定义在page的.wxss文件只作用于对应的页面，会覆盖app.wxss中相同的选择器

# 2. 小程序内容详解

# 2.1 wxml

# 2.1.1 数据绑定

传统的视图和数据绑定

image.png

小程序中视图和数据绑定 对象数据变化直接影响视图，视图变化必须同过事件驱动才能改变对象数据

image.png

WXML 中的动态数据均来自对应的 Page 的 data。数据绑定使用 Mustache 语法（双大括号将变量包起来）。

  • 基本使用

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

    Page({
	data: {
		message: "Hello MINA!",
		name: "李白",
		status: 3,
	},
});

  • 绑定属性

    <view data-name="{{name}}"></view>

  • 支持表达式

    <view hidden="{{status > 5}}">是否显示</view>
<view class="{{status === 3 ? 'red' : 'blue'}}"></view>
<view> {{'hello' + name}}</view>

  • 更多使用方式 查看

# 2.1.2 列表渲染

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

Page({
	data: {
		array: [
			{
				message: "foo",
			},
			{
				message: "bar",
			},
		],
	},
});

使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：

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

# 2.1.3 条件渲染

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{isLogin}}">已登录</view>
<view wx:else>请登录</view>

<view wx:if="{{module == 'A'}}"> A </view>
<view wx:elif="{{module == 'B'}}"> B </view>
<view wx:else> C </view>

# 2.1.4 block的使用

<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

<block wx:for="{{array}}" wx:key="{{index}}">
	<text>{{item}}</text>
</block>
<block wx:if="{{flag}}">
	<text>看flag是否为true</text>
</block>

# 2.1.5 组件属性

  • ID/class ID 名/类名

  • style 行内样式

  • hidden 组件是否显示

  • data-* 自定义属性

    可以通过事件的e.target.dataset.*来获取设置的自定义属性

    <!-- wxml -->
<view bindtap="clickMe" data-testId="{{testId}}"></view>

// js Page({ clickMe: function(event) { var testId = event.target.dataset.testid; } })

  • 注意：不要直接写 hidden="false" ， 其计算结果是一个字符串，转成 boolean 类型后代表真值。现在好像可以不带花括号，建议加上

  • wx:if和hidden都可以实现组件的显示和隐藏效果；区分场景：如果需要频繁切换，用 hidden 更好；如果执行条件不大可能改变则使用 wx:if 较好

# 2.1.6 组件类型

参见官方 API

# 2.2 wxss

# 2.2.1 尺寸单位 rpx

可以根据屏幕宽度进行自适应。小程序规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

image.png

# 2.2.2 样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

/** common.wxss **/
.small-p {
	padding: 5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
	padding: 15px;
}

# 2.2.3 选择器

wxss 选择器的类型和优先级与 css 中的相同

  • 小程序的运行机制

    • 启动
      • 冷启动： 第一次打开小程序和小程序被微信后台销毁后重新打开（销毁一般为 5 分钟）
      • 热启动： 小程序已经打开过，转为后台，未被销毁前再次调用
    • 启动过程中如果发现新版本，会异步下载更新包，并且在下次启动时运用新的版本
上次更新: 10/29/2019, 6:04:16 PM

← 生命周期 →