小程序之入门布局篇

前言

阅读这篇文章你将学到：

• 快速启动一个小程序项目
• 快速上手小程序重构业务
• 在页面布局中遇到的一些坑
• 使用mpvue框架进行快速开发

基础

起步

安装

安装微信web开发者工具，根据本身的操做系统下载对应的安装包进行安装，有关开发者工具更详细的介绍能够查看《开发者工具介绍》 。

注册

当打开微信开发者工具后，会须要咱们填写AppID，点击注册申请AppID

将申请好的AppID复制填入相应位置，根据相应提示便可成功建立一个项目。

工具

以下图所示：

• ①预览模拟器
• ②调试工具
• ③编译模式
  • 可保存当前页的调试
• ④手机预览
  • Ctrl+Shift+P为快捷键，可没必要拿手机扫码预览
• ⑤目录树
  • 文件操做
    • 1.在pages下新建一个文件夹后，可右键点击page生成4个模板页面wxml、wxss、js、json
    • 2.在app.json的pages字段，添加须要新建的页面路径，也会自动生成改页面所须要的文件
• ⑦ 小程序主题样式
  • 可配置标题栏的背景色和文字颜色
  • 输入window可自动补全
• ⑧ 底部菜单栏
  • 输入tabBar可自动补全

代码构成

JSON配置

在项目的根目录有一个app.json和project.json,此外在页面pages/index目录下还有一个index.json,下面依次说明一下他们的用途。

开发者工具配置

工具配置 project.config.json

在使用一个工具的时候，会作一些个性化的配置，例如界面的颜色、编译配置、快捷键等等，当咱们重装这个工具的时候，就又要重复配置一次，很麻烦。因此这个project.config.json用来记录开发者工具的信息，比较经常使用的一点是，这个文件能够记录项目名称、AppId,就不用去询问技术同事AppID是多少，他们只需将咱们的微信号添加为开发者，则可启动小程序。project.config.json部分配置以下：

{
	"description": "项目配置文件",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": true,
		"postcss": true,
		"minified": true,
		"newFeature": true
	},
	"compileType": "miniprogram",
	"libVersion": "2.3.0",
	"appid": "wxdfee0be3b147059f",
	"projectname": "stream",
	"debugOptions": {
		"hidedInDevtools": []
	}
}
复制代码

其余配置项细节能够参考文档 开发者工具的配置 。

全局配置

小程序全局配置app.json app.json是当前小程序的全局配置，包括了小程序全部的页面路径、界面表现、网络超过期间、底部tab切换等。app.json内容以下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    backgroundColor:#000,
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [
        {
          "pagePath": "pages/index/index",
          "text": "首页"
        },
        {
          "pagePath": "pages/logs/logs",
          "text": "日志"
        }
    ]
  },
}
复制代码

• 1.pages字段
  • 用于描述当前小程序全部页面路径
• 2.window字段
  • 定义小程序全部页面的下拉背景颜色（可将此背景颜色设置与主页面背景颜色一致）、导航栏背景颜色、文字颜色等。
• 3.tabBar
  • 底部tab栏的表现

以上字段都可自动补全，其余配置项细节能够参考文档 小程序的配置 app.json

页面配置

页面配置 page.json

这个的page.json指的是pages/index.json这类的相关配置。例如，index.json只能配置app.json中"window"字段，且页面配置会覆盖app.json中的"window"字段

WXML模板

WXML（WeiXin Markup Language）是框架设计的一套标签语言，在小程序中，WXML充当HTML的角色，描述当前页面的结构。

数据绑定

经过 {{ }} 的语法把一个变量绑定到界面上，咱们称为数据绑定。
数据绑定的方式，提倡把渲染和逻辑分开，简单来讲就是不要让JS直接操控DOM，WXML只管渲染，JS只须要管理状态便可，WXML中动态数据均来自于Page中的data，如如下代码：

WXML :

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

复制代码

WXS：

Page({ // Page可以自动补全
  data: {
    message: '你好呀!'
  },
  onLoad: function (options) {
   this.setData({ 
    msg: "我很好!" 
   })  
  },
})
复制代码

列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，默认数组的当前项下标默认为index，数组当前项变量名为item，以下代码：

WXML

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

WXS

Page({
  data: {
    array: [
        {
          message: 'foo',
        },
        {
          message: 'bar'
        }
    ]
  }
})
复制代码

若是你不想使用默认的index和item,可使用小程序提供的wx:for-index,指定当前下标变量名，使用wx:for-item指定当前项变量名，以下代码：

WXML

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

wx:for 也能够嵌套，下边是一个九九乘法表，代码以下：

WXML

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>
复制代码

wx:key
若是列表中项目的位置会动态改变，或者有新的项目添加到列表中，而且但愿列表中的项目保持本身的特征(如中输入内容， 的选中状态)，须要使用wx:key来指定列表中项目的惟一标识符。

若是不提供wx:key，会报一个warning，若是明确知道列表是静态的，或者没必要关注其顺序，能够选择忽略

当数据改变触发渲染层从新渲染的时候，会校订带有 key 的组件，框架会确保他们被从新排序，而不是从新建立，以确保使组件保持自身的状态，而且提升列表渲染时的效率。

因此当有循环的时候，建议仍是要加上wx:key。

条件渲染

wx:if

由于 wx:if 是一个控制属性，须要将它添加到一个标签上。若是要一次性判断多个组件标签，可使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>
复制代码

注意： 并非一个组件，它仅仅是一个包装元素，不会在页面中作任何渲染，只接受控制属性。

引号变量

组件属性、控制属性、关键字属性均须要在双引号以内，不然会报错，以下代码：

WXML

<view id="item-{{id}}">组件属性</view>
<view wx:if="{{condition}}">控制属性</view>
<checkbox checked="{{false}}">关键字</checkbox>
复制代码

WXS

Page({
  data: {
    id: 0,
    condition: true,
  }
})
复制代码

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后表明真值。

WXSS样式

WXSS 具备 CSS 大部分的特性，小程序在 WXSS 也作了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时，开发者须要考虑到手机设备的屏幕会有不一样的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者能够免去换算的烦恼，只要交给小程序底层来换算便可。

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

此外 WXSS 仅支持部分 CSS 选择器。

WXS

点击 button 按钮的时候，咱们但愿把界面上 msg 显示成 "Hello World"，因而咱们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应此次点击操做：

WXML

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
复制代码

WXS

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})
复制代码

踩坑

• Q1：小程序背景图
  问题：小程序不支持background本地图。
  解决：将图片上传七牛云服务器中的存储空间

• Q2：服务器图片缓存
  问题：在服务器更新图片时，会有缓存，暂时访问不到最新的图片
  解决：在请求的连接后加上参数
  

  

• Q3：小程序上下拉动出现白屏
  问题：当用力往下拉，页面顶部会出现一段空白的地方，用户体验很差
  解决：在当前页面的json文件里，加上属性"disableScroll":true，再配合scroll-view一块儿使用，可解决多内容超出滚动，适配小屏幕手机

• Q4：小程序open-data组件
  问题：open-data组件添加样式无效
  解决：使用overflow: hidden

  <view class="userinfo">
      <open-data  type="userAvatarUrl" class="userAvatarUrl"></open-data>
      <open-data type="userNickName" class="userNickName"></open-data>
  </view>
  复制代码

• Q5：小程序scroll-view横向划动
  问题：scroll-view横向划动无效
  解决：
  1.要给scroll-view设置宽度，并设置white-space:nowrap；
  2.将容器内的子元素每一项设置宽度和display:inline-block

mpvue

介绍

mpvue （github 地址请参见）是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其能够运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

名称由来

• mp：mini program 的缩写
• mpvue：Vue.js in mini program

主要特性

• H5 代码转换编译成小程序目标代码的能力
• 完全的组件化开发能力：提升代码复用性
• 支持使用 npm 外部依赖
• 完整的 Vue.js 开发体验
• 方便的 Vuex 数据管理方案：方便构建复杂应用
• 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
• 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

5分钟教程

经过 Vue.js 命令行工具 vue-cli，你只需在终端窗口输入几条简单命令，便可快速建立和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目：

# 1.全局安装 vue-cli
npm install -g @vue/cli-init

# 2.建立一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 3.进入项目文件夹
$ cd my-project

# 4.安装依赖
$ npm install
复制代码

建立项目过程以下图：

mpvue目录以下图：

本文参考：developers.weixin.qq.com/miniprogram…