从而为小程序开发引入了整套 Vue.js,阅读这篇文

2020-01-04 14:24栏目:美高梅开户
TAG:

同样,微信小程序也提供了getStorage({})方法,用于获取对应key中存储的数据,其还有success、fail、complete三个回调函数,如:

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

    美高梅开户送58元官网 18.png

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

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

    <view > <open-data type="userAvatarUrl" ></open-data> <open-data type="userNickName" ></open-data></view>
    
  • Q5:小程序scroll-view横向划动 问题:scroll-view横向划动无效解决:1.要给scroll-view设置宽度,并设置white-space:nowrap; 2.将容器内的子元素每一项设置宽度和display:inline-block

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 快速初始化项目

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

# 1.全局安装 vue-clinpm install -g @vue/cli-init# 2.创建一个基于 mpvue-quickstart 模板的新项目$ vue init mpvue/mpvue-quickstart my-project# 3.进入项目文件夹$ cd my-project# 4.安装依赖$ npm install

创建项目过程如下图:

美高梅开户送58元官网 26.png

mpvue目录如下图:

美高梅开户送58元官网 37.png

本文参考:

小程序给页面提供了onLoad(页面加载)、onShow(页面显示,但还未渲染完成)、onReady(页面渲染完成)、onHide(页面隐藏)、onUnload(页面卸载),mpvue将小程序提供的页面生命周期和vue的生命周期结合在了一起,也就是说使用mpvue开发小程序,可以同时使用小程序的生命周期和vue的生命周期,其顺序为:beforeCreate -- created -- onLoad -- onShow -- onReady -- beforeMount -- mounted。即Vue首先实例化然后页面开始加载、显示、渲染,页面渲染完成后Vue实例开始挂载

安装

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

// app.json

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.jsonapp.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"字段

{ "pages": [ "pages/index/main" ], "tabBar": { ...... }, "window": { "backgroundColor":"#00BFFF", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "测试", "navigationBarTextStyle": "black" }}

WXSS样式

WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。

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

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

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

// main.js

工具

如下图所示:

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

美高梅开户送58元官网 43.png

轮播图组件微信小程序提供了一个swiper轮播图组件,其中只可放置swiper-item组件,swiper有一些常用的属性,如:

阅读这篇文章你将学到:

wx全局对象就像网页运行在浏览器环境一样,浏览器环境会提供一个全局的window对象,同样小程序是运行在小程序环境中,小程序环境也会提供一个全局的wx对象,wx会提供很多api,比如访问网络(wx.request({}))、页面跳转(wx.redirectTo({}))、显示loading(wx.showLoading({}))、显示提示(wx.showToast({}))等

注册

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

美高梅开户送58元官网 51.png

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

美高梅开户送58元官网 62.png

indicator-dots: 是否显示面板指示点;autoplay: 是否自动切换;interval: 设置自动切换时间间隔;duration: 滑动动画时长;circular: 是否循环播放;indicator-active-color: 设置当前选中的指示点颜色;

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

vue 3.0已经不支持vue init命令了,所以需要单独安装@vue/cli-init,安装好之后,就可以按以下操作步骤引入mpvue模板了

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  { 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,如果明确知道列表是静态的,或者不必关注其顺序,可以选择忽略

美高梅开户送58元官网 75.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 >组件属性</view><view wx:if="{{condition}}">控制属性</view><checkbox checked="{{false}}">关键字</checkbox>

WXS

Page({ data: { id: 0, condition: true, }})

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

npm run dev命令会在项目根目录下生成一个dist目录,其就是将vue的项目转换为微信小程序项目

① 通过脚手架引入mpvue模板

pages属性,是一个数组,用于定义小程序用到的页面,数组中每一项对应一个页面,即路径+文件名信息,不需要写后缀,在mpvue中所有页面固定使用main,即每个页面下都会有一个main.js,所以在配置pages时,通常为"pages/页面名/main",位于pages数组第一项表示小程序的初始页面,即小程序运行时显示的页面window属性,即对小程序的窗口样式进行配置,其属性值为一个对象,主要包括backgroundColor(窗口背景颜色,即页面下拉后漏出的背景窗口颜色)、backgroundTextStyle(设置下拉背景字体、loading图的样式,目前只支持dark和light)、navigationBarBackgroundColor(导航栏背景颜色)、navigationBarTextStyle(导航栏标题颜色,目前只支持black和white)、navigationBarTitleText(导航栏标题文字内容)、navigationStyle(值为custom自定义导航栏)

一、mpvue简介

需要注意的是,返回状态码为404也算请求成功一般只有网络异常的时候才算请求失败

三、mpvue的一些使用细节

mpvue 是一个使用 Vue.js开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。mp 即mini program的缩写。

tarBar属性,用于配置窗口底部的tabBar,其属性值为一个对象,主要有color(设置tab未激活状态文字的颜色)、selectedColor(设置tab激活状态的文字颜色)、borderStyle(设置tabBar上边框的颜色,目前只支持black和white)、backgroundColor(设置tab的背景颜色)、list(用于配置tab项,最多可配置5项),list属性值为一个数组,主要包括text(tab上显示的文字内容)、iconPath(tab处于未激活状态时显示的图标路径)、selectedPath(tab处于激活状态时显示的图标路径)、pagePath(tab被点击时要跳转的页面路径,其属性值为pages中配置的路径)

跳转页面非tabBar页面如果想要跳转到某个非tabBar页面,那么可以使用一个全局的api,即wx.redirectTo({}),其作用就是关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。需要传递一个配置对象,主要属性为url,即要跳转页面的路径,可带参数,然后就是success、fail、complete三个回调函数,请处理跳转结果,如:

npm install -g @vue/cli-initvue init mpvue/mpvue-quickstart my-projectcd my-projectnpm installnpm run dev
scroll-view scroll-x :scroll-into-view="toChildView" scroll-with-animation span : v-for="(item, index) in allLessons" :key="index" : @click="switchItem(index)" {{item.name}} /span/scroll-view

② 搭建小程序的开发环境

scriptexport default { }/scriptstylepage { width: 100%; height: 100%; background-color: #f7f7f7;}/style

页面配置配置相对于全局主配置文件来说要简单得多,在页面配置文件中只能配置窗口的样式属性,即只能配置全局配置文件中的window属性中的内容,页面配置文件中配置的内容会覆盖掉全局配置文件中window中相同的配置,以决定当前页面的窗口表现,无需使用window属性,直接将window配置放到花括号中即可

import Vue from 'vue'import App from './App'Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue(App)app.$mount()
button open-type="getUserInfo" @getuserinfo="getUserInfo"点击开始/buttonscriptexport default { getUserInfo(e) { console.log(e.mp.detail.userInfo); // 获取用户信息 }}/script

本地缓存数据微信小程序提供了setStorage({})方法,可以将数据存储在本地缓存中指定的 key 中,除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。如:

getStorage()和setStorage()方法本身是异步的,但是微信小程序提供了对应的同步方法,即getStorageSync("key")setStorageSync("key", "value")美高梅开户送58元官网,;

scroll-x: 是否允许横向滚动;scroll-y: 是否允许纵向滚动;scroll-into-view: 属性值为对应滚动item的id,表示自动滚动到对应id元素位置;scroll-with-animation: 在设置滚动条位置时使用动画过渡;

可滚动区域组件微信提供了一个scroll-view可滚动区域组件,用于设置该区域中的内容是可以滚动的,通常用于实现可滚动的导航标签栏,其常用属性为:

wx.getStorage({ key: "key", success (res) { // 成功获取到对应key中的数据 }, fail() { // 未成功获取到对应key中的数据 }, complete() { // 获取对应key数据结束,不管成功还是失败都会执行 }});

版权声明:本文由美高梅开户送58元官网发布于美高梅开户,转载请注明出处:从而为小程序开发引入了整套 Vue.js,阅读这篇文