小程序之入门布局篇

作者: 谭瞎 | 来源:发表于2018-10-16 17:31 被阅读126次

    前言

    阅读这篇文章你将学到:

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

    基础

    起步

    安装

    安装微信web开发者工具,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看《开发者工具介绍》

    注册

    当打开微信开发者工具后,会需要我们填写AppID,点击注册申请AppID

    1.png

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

    2.png

    工具

    如下图所示:

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

    代码构成

    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
    如果列表中项目的位置会动态改变,或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征(如<input/>中输入内容,<switch/>的选中状态),需要使用wx:key来指定列表中项目的唯一标识符。

    如果不提供wx:key,会报一个warning,如果明确知道列表是静态的,或者不必关注其顺序,可以选择忽略

    5.png

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

    所以当有循环的时候,建议还是要加上wx:key。

    条件渲染

    wx:if

    因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

    <block wx:if="{{true}}">
      <view> view1 </view>
      <view> view2 </view>
    </block>
    

    注意: <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:服务器图片缓存
      问题:在服务器更新图片时,会有缓存,暂时访问不到最新的图片
      解决:在请求的链接后加上参数

      8.png
    • 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
    

    创建项目过程如下图:

    6.png

    mpvue目录如下图:

    7.png

    本文参考:https://developers.weixin.qq.com/miniprogram/dev/

    相关文章

      网友评论

        本文标题:小程序之入门布局篇

        本文链接:https://www.haomeiwen.com/subject/zbnhzftx.html