精华内容
下载资源
问答
  • mpvue

    2019-04-12 22:49:00
    使用mpvue开发小程序 首先安装 我们使用@vue/cli 无法使用vue init 可以全局安装一个@vue/cli-init npm install -g @vue/cli-init 然后初始化mpvue项目 vue init mpvue/mpvue-quickstart my-project ...

    使用mpvue开发小程序

    首先安装

    我们使用@vue/cli 无法使用vue init

    可以全局安装一个@vue/cli-init

    npm install -g @vue/cli-init

    然后初始化mpvue项目

    vue init mpvue/mpvue-quickstart my-project

    然后小程序打开项目

     

    转载于:https://www.cnblogs.com/sonwrain/p/10699161.html

    展开全文
  • mpVue

    2018-11-22 11:41:29
    http://mpvue.com/ 全局安装 vue-cli $ npm install --global vue-cli ...$ vue init mpvue/mpvue-quickstart my-project 安装依赖 $ cd my-project $ npm install 启动构建 $ npm run dev 新增的页...

    http://mpvue.com/

    全局安装 vue-cli

      $ npm install --global vue-cli
    

    创建一个基于 mpvue-quickstart 模板的新项目

      $ vue init mpvue/mpvue-quickstart my-project
    

    安装依赖

      $ cd my-project
      $ npm install
    

    启动构建

      $ npm run dev
    

    新增的页面需要重新 npm run dev 编译

    小程序配置 app.json
    app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
    pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
    window字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。

      {
        "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
      }
    

    https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
    工具配置 project.config.json
    通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。
    考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
    其他配置项细节可以参考文档 开发者工具的配置 。
    页面配置 page.json
    这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
    如果你整个小程序的风格是蓝色调,那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样,可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块,因此我们提供了 page.json,让开发者可以独立定义每个页面的一些属性,例如刚刚说的顶部颜色、是否允许下拉刷新等等。
    其他配置项细节可以参考文档 页面配置 。
    WXML 模板
    标签名字 小程序的 WXML 用的标签是 view, button, text 等等
    wx:if 这样的属性以及 {{ }} 的表达式

      <view class="container">
        <view class="userinfo">
          <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
          <block wx:else>
            <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
            <text class="userinfo-nickname">{{userInfo.nickName}}</text>
          </block>
        </view>
        <view class="usermotto">
          <text class="user-motto">{{motto}}</text>
        </view>
      </view>
    

    WXML

      <text>{{msg}}</text>
    

    JS

      this.setData({ msg: "Hello World" })
    

    WXSS 样式
    WXSS 在底层支持新的尺寸单位 rpx
    提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
    WXSS 仅支持部分 CSS 选择器
    更详细的文档可以参考 WXSS 。
    JS 交互逻辑

      <view>{{ msg }}</view>
      <button bindtap="clickMe">点击我</button>
    

    点击 button 按钮的时候,我们希望把界面上 msg 显示成 “Hello World”,在 button 上声明一个属性: bindtap ,在 JS 文件里边声明了 clickMe 方法来响应这次点击操作:

      Page({
        clickMe: function() {
          this.setData({ msg: "Hello World" })
        }
      })
    

    事件可以参考文档 WXML - 事件
    调用了 wx.getUserInfo 获取微信用户的头像和昵称,最后通过 setData 把获取到的信息显示到界面上。更多 API 可以参考文档 小程序的API

      Page({
        data: { // 参与页面渲染的数据
          logs: []
        },
        onLoad: function () {
          // 页面渲染后 执行
        }
      })
    

    组件

      <map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>
    

    更多的组件可以参考 小程序的组件。
    API
    要获取用户的地理位置时:

      wx.getLocation({
        type: 'wgs84',
        success: (res) => {
          var latitude = res.latitude // 经度
          var longitude = res.longitude // 纬度
        }
      })
    

    调用微信扫一扫能力:

      wx.scanCode({
        success: (res) => {
          console.log(res)
        }
      })
    

    需要注意的是:多数 API 的回调都是异步,你需要处理好代码逻辑的异步问题。
    更多的 API 能力见 小程序的API。

    实例生命周期
    同 vue,不同的是我们会在小程序 onReady 后,再去触发 vue mounted 生命周期

      beforeCreate
      created
      beforeMount
      mounted
      beforeUpdate
      updated
      activated
      deactivated
      beforeDestroy
      destroyed
    

    除了 Vue 本身的生命周期外,mpvue 还兼容了小程序生命周期,这部分生命周期钩子的来源于微信小程序的 Page, 除特殊情况外,不建议使用小程序的生命周期钩子。

    app 部分:

      onLaunch,初始化   相当于react的componentDidMount
      onShow,当小程序启动,或从后台进入前台显示
      onHide,当小程序从前台进入后台
      page 部分:
      onLoad,监听页面加载
      onShow,监听页面显示
      onReady,监听页面初次渲染完成
      onHide,监听页面隐藏
      onUnload,监听页面卸载
      onPullDownRefresh,监听用户下拉动作
      onReachBottom,页面上拉触底事件的处理函数
      onShareAppMessage,用户点击右上角分享
      onPageScroll,页面滚动
      onTabItemTap, 当前是 tab 页时,点击 tab 时触发 (mpvue 0.0.16 支持)
      onPageNotFound,页面找不到
    

    用法示例:

      new Vue({
        data: {
          a: 1
        },
        created () {
          // `this` 指向 vm 实例
          console.log('a is: ' + this.a)
        },
        onShow () {
          // `this` 指向 vm 实例
          console.log('a is: ' + this.a, '小程序触发的 onshow')
        }
      })
    

    微信小程序的页面的 query 参数是通过 onLoad 获取的,mpvue 对此进行了优化,直接通过 this.root.root.mp.query 获取相应的参数数据,其调用需要在 onLoad 生命周期触发之后使用,比如 onShow 等,具体生命周期调用顺序,

    1.不支持 纯-HTML
    小程序里所有的 BOM/DOM 都不能用,也就是说 v-html 指令不能用。

    2.不支持部分复杂的 JavaScript 渲染表达式
    我们会把 template 中的 {{}} 双花括号的部分,直接编码到 wxml 文件中,由于微信小程序的能力限制(数据绑定),所以无法支持复杂的 JavaScript 表达式。
    目前可以使用的有 + - * % ?: ! == === > < [] .,

      <!-- 这种就不支持,建议写 computed -->
      <p>{{ message.split('').reverse().join('') }}</p>
      
      <!-- 但写在 @event 里面的表达式是都支持的,因为这部分的计算放在了 vdom 里面 -->
      <ul>
          <li v-for="item in list">
              <div @click="clickHandle(item, index, $event)">{{ item.value }}</p>
          </li>
      </ul>
    

    3.不支持过滤器
    渲染部分会转成 wxml ,wxml 不支持过滤器,所以这部分功能不支持。
    4.不支持函数
    不支持在 template 内使用 methods 中的函数。

    5.不支持 官方文档:Class 与 Style 绑定 中的 classObject 和 styleObject 语法。
    class 支持的语法:

      <p :class="{ active: isActive }">111</p>
      <p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</p>
      <p class="static" :class="[activeClass, errorClass]">333</p>
      <p class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</p>
      <p class="static" v-bind:class="[{ active: isActive }, errorClass]">555</p>
      style 支持的语法:
      <p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</p>
      <p v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</p>
    
      <template>
          <!-- 支持 -->
          <div class="container" :class="computedClassStr"></div>
          <div class="container" :class="{active: isActive}"></div>
      
          <!-- 不支持 -->
          <div class="container" :class="computedClassObject"></div>
      </template>
    

    列表渲染
    全支持 官方文档:列表渲染
    只是需要注意一点,嵌套列表渲染,必须指定不同的索引!
    示例:

      <template>
          <ul v-for="(card, index) in list">
              <li v-for="(item, itemIndex) in card">
                  {{item.value}}
              </li>
          </ul>
      </template>
    

    事件处理器
    几乎全支持啦 官方文档:事件处理器
    我们引入了 Vue.js 的虚拟 DOM ,在前文模版中绑定的事件会被挂在到 vnode 上,同时我们的 compiler 在 wxml 上绑定了小程序的事件,并做了相应的映射,所以你在真实点击的时候通过 runtime 中 handleProxy 通过事件类型分发到 vnode 的事件上,同 Vue 在 WEB 的机制一样,所以可以做到无损支持。同时还顺便支持了自定义事件和 $emit 机制。
    // 事件映射表,左侧为 WEB 事件,右侧为 小程序 对应事件

      {
          click: 'tap',
          touchstart: 'touchstart',
          touchmove: 'touchmove',
          touchcancel: 'touchcancel',
          touchend: 'touchend',
          tap: 'tap',
          longtap: 'longtap',
          input: 'input',
          change: 'change',
          submit: 'submit',
          blur: 'blur',
          focus: 'focus',
          reset: 'reset',
          confirm: 'confirm',
          columnchange: 'columnchange',
          linechange: 'linechange',
          error: 'error',
          scrolltoupper: 'scrolltoupper',
          scrolltolower: 'scrolltolower',
          scroll: 'scroll'
      }
    

    在 input 和 textarea 中 change 事件会被转为 blur 事件。
    踩坑注意:
    列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将bind改为@ @regionchange,同时这个事件也非常特殊,它的 event type 有 begin 和 end 两个,导致我们无法在handleProxy 中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regiοnchange=“functionName” @end=“functionName” @begin=“functionName”>
    小程序能力所致,bind 和 catch 事件同时绑定时候,只会触发 bind ,catch 不会被触发,要避免踩坑。
    事件修饰符
    .stop 的使用会阻止冒泡,但是同时绑定了一个非冒泡事件,会导致该元素上的 catchEventName 失效!
    .prevent 可以直接干掉,因为小程序里没有什么默认事件,比如submit并不会跳转页面
    .capture 支持 1.0.9
    .self 没有可以判断的标识
    .once 也不能做,因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理,但非常的不优雅,违背了原意,暂不考虑
    其他 键值修饰符 等在小程序中压根没键盘,所以。。。
    表单控件绑定
    建议开发过程中直接使用 微信小程序:表单组件 。用法示例:
    select 组件用 picker 组件进行代替

    <template>   <div>
       <picker @change="bindPickerChange" :value="index" :range="array">
         <view class="picker">
           当前选择:{{array[index]}}
         </view>
       </picker>   </div> </template>
    
    <script> export default {   data () {
       return {
         index: 0,
         array: ['A', 'B', 'C']
       }   },   methods: {
       bindPickerChange (e) {
        console.log(e)
       }   } }
    </script>
    

    表单元素 radio 用 radio-group 组件进行代替

      <template>
        <div>
          <radio-group class="radio-group" @change="radioChange">
            <label class="radio" v-for="(item, index) in items" :key="item.name">
              <radio :value="item.name" :checked="item.checked"/> {{item.value}}
            </label>
          </radio-group>
        </div>
      </template>
      
      <script>
      export default {
        data () {
          return {
            items: [
              {name: 'USA', value: '美国'},
              {name: 'CHN', value: '中国', checked: 'true'},
              {name: 'BRA', value: '巴西'},
              {name: 'JPN', value: '日本'},
              {name: 'ENG', value: '英国'},
              {name: 'TUR', value: '法国'}
            ]
          }
        },
        methods: {
          radioChange (e) {
            console.log('radio发生change事件,携带value值为:', e.target.value)
          }
        }
      }
      </script>
    

    页面跳转

      <navigator  :class="matchState?'gen-matchCard-warp gen-matchCard-begin': 'gen-matchCard-warp gen-matchCard-end'"
        url="../../pages/schedule/index">
        :url="'../../pages/schedule/index?name=' + macthData.name">
      </navigator>
    

    mptoast 组件代替官方提供的 wx.showToast,

    npm i vuex
    npm i mptoast 
    
    展开全文
  • awesome-mpvue:与mpvue相关的精选精彩清单
  • 使用mpvue重写 ,实现了其中所有组件。 Vant Weapp是基于有赞Zanui组件库进行的品牌升级,对于仍在使用Zanui的用户,建议逐步使用Vant Weapp替换替代的组件。 Zanui后续会进入维护状态,仓库地址为: : Vant在...
  • 1,updateDataToMP时通过diff进行数据增量更新(此处复制了uni-app中mpvue的diff算法) 2,initDataToMP将数据深拷贝,在显示时通过diff进行数据增量更新。 3,初始化页面时,仅在负载事件上执行最顶层的父组件的...
  • Mpvue介绍

    千次阅读 2019-08-31 16:12:50
    Mpvue是什么? Mpvue是一个基于Vue的微信小程序前端框架,可以让我们用vue的语法写小程序的项目。简单来说就是,以前我们写微信小程序,必须借助微信小程序的开发者工具,微信开发工具提供的语法才能写小程序,Mpvue...

    Mpvue是什么?

    Mpvue是一个基于Vue的微信小程序前端框架,可以让我们用vue的语法写小程序的项目。简单来说就是,以前我们写微信小程序,必须借助微信小程序的开发者工具,微信开发工具提供的语法才能写小程序,Mpvue的出现,让我们可以先使用vue写好项目,然后利用Mpvue把我们写好的项目打包成小程序。
    mpvue是一个使用vue.js开发小程序的前端框架,该框架基于vue.js核心,mpvue修改了vue.js的runtime和compiler实现,使其可以运行在小程序环境中,从而为小程序开发引入整套vue.js开发体验。
    官网http://mpvue.com/

    Mpvue的未来目标?

    在未来最理想的状态是,可以一套代码直接跑在多端,WEB、小程序(微信和支付宝)、Native(借助weex)。

    如何创建Mpvue的项目?

    1.必须安装node.js
    2.安装vue脚手架 npm install --global vue-cli / cnpm install --global vue-cli
    3.创建项目 找到项目目录运行命令: vue init mpvue/mpvue-quickstart my-project
    4.cd到项目里面安装依赖 cd my-project
    5.cnpm install /npm install
    6.npm run dev 就可以把创建的vue项目转换成小程序的项目

    展开全文
  • mpvue官网

    千次阅读 2018-04-10 11:04:02
    http://mpvue.com/mpvue/
    展开全文
  • mpvue笔记

    2019-01-24 15:41:00
    mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,为小程序开发引入 Vue.js 开发体验 我觉得就像scss一样,写的时候方便,最后还是要转成css文件 搭建项目: vue init mpvue/mpvue-quickstart my-project ...
  • 基于 vue-calendar 的适配 mpvue 平台的的微信小程序日历组件 预览 (此图片来源于网络,如有侵权,请联系删除! ) 安装 npm i mpvue-calendar 使用 import Calendar from 'mpvue-calendar' 引入组件 components...
  • 基于mpvue和bootstrap的cnode微信小程序 项目简介 一个小程序版的cnode客户端,项目采用mpvue + bootstrap技术栈架。 感谢来自官方提供的api! 运用的技术主要有: 采用mpvue + bootstrap技术栈,通过vuex来管理页面...
  • mpvue 小程序

    2018-11-07 16:19:50
    mpvue 最新示例,快速下载,即刻拥有 快来下载吧。包含大量信息
  • mpvue】如何升级mpvue版本

    千次阅读 2019-04-17 15:05:13
    打开小程序项目,在package.json文件中可以看到mpvue当前的版本,可以看出我当前mpvue的版本是"^2.0.0",意思是安装mpvue时,2.X.X的最新版本。 "dependencies": { "mpvue": "^2.0.0", "vuex": "^3.0.1", "wafer...
  • 学习mpvue

    2018-06-19 15:38:00
    1.初始化mpvue项目 1.检查node.js和npm的版本 2.npm set registry https://registry.npm.taobao.org/ 3.使用vue-cli npm install --global vue-cli 4.创建项目 vue init mpvue/mpvue-quickstart xxx-project ...
  • mpvue学习

    2019-09-03 10:16:18
    但是实际上vue init那一句是要这样写的:vue init mpvue/mpvue-quickstart my-project。现在D盘建一个文件夹,然后在这个文件夹内输入命令。 建好项目之后,我用webstorm打开,然后build了。然后在微信小程序里面...
  • 初识Mpvue

    2018-09-16 09:49:10
    一、mpvue是什么? 1、定义:mpvue是一款使用Vue.js开发微信小程序的前端框架。 2、优点:使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力。 3、知名应用:mpvue已经在美团...
  • … 管理员身份运行cmd,然后 npm set registry https://registry.npm.taobao.org/ vue init mpvue/mpvue-wuickstart truth_hold 详情参考:https://blog.csdn.net/wltsysterm/article/details/104749630 ...
  • mpvue 解析

    2018-07-09 09:42:00
    mpvue是一款使用Vue.js开发微信小程序的前端框架。 总结 生命周期的理解 文档 一次前后端实践 使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力。 如果想将 H5 项目改造...
  • MpVue解析

    2018-08-02 14:19:00
    前言 mpvue是一款使用Vue.js开发微信小程序的前端框架。使用此框架,开发者将得到...目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广...
  • mpVue 入门

    2020-07-29 16:41:57
    第一步:初始化项目 通过 Vue.js 命令行工具 vue-cli,你只需在终端窗口输入几条简单命令,即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目: ...# 创建一个基于 mpvue-quicksta
  • 此为mpvue框架开发的音乐类微信小程序,歌手及歌曲信息真实线上抓取。下载解压后运行步骤如下: ①:把project.config.json中的appid换成你的appid ②:npm install 安装依赖 ③:npm run dev 运行项目 ④:使用...
  • 1.参考git:https://github.com/F-loat/mpvue-wxParse ...npm i mpvue-wxparse 3.使用 <template> <div> <wxParse :content="article" @preview="preview" @navigate="navigate" /> &l...
  • mpvue构建项目

    2021-03-16 15:56:16
    mpvue构建项目 mpvue简介 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js ...
  • mpvue_douban-源码

    2021-03-02 04:18:04
    mpvue_douban Mpvue项目 构建设置 # 初始化项目 vue init mpvue/mpvue-quickstart myproject cd myproject # 安装依赖 yarn # 开发时构建 npm dev # 打包构建 npm build # 指定平台的开发时构建(微信、百度、头条、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,901
精华内容 1,960
热门标签
关键字:

mpvue

vue 订阅