开始

使用脚手架mpx-cli，快速开始开发mpx小程序

安装mpx-cli

  1. npm i -g @mpxjs/cli

创建工程

  • 在已有文件夹内创建mpx工程：
  1. # 当前文件夹名就是你的项目名
  2. mpx init .
  • 在当前目录中创建工程目录
  1. mpx init <project-name>

插件项目由于微信限制必须填写插件的AppID，普通项目无强制要求。

mpx编译

启动服务，mpx会将源码编译成小程序识别的代码，并监听文件变化进行重编译

  1. npm install
  2. npm run watch

小程序编译

mpx编译完成后，会将小程序代码放置在dist目录

参考小程序官方的开发指南进行预览、调试

创建App/Page/Component

我们通过createApp、createPage、createComponent（分别对应小程序原生的App、Page、Component方法）来创建小程序、页面、组件。

下面看一个例子：

例子

开始一个demo项目的流程。

初始化项目： 安装项目

接下来：

  1. # 进入project
  2. cd mpx-demo
  4. # 安装依赖
  5. npm i
  7. # 进行开发
  8. npm run watch

开启服务

用微信开发者工具打开目录 ~/testproject/mpx-test/dist

在src/app.mpx创建一个App

  1. <script>
  2.   import { createApp } from '@mpxjs/core'
  3.   createApp({
  4.     onShow(options) {
  5.       console.log(options)
  6.     }
  7.   })
  8. </script>
  10. <style lang="stylus">
  11.   page
  12.     font-family: PingFangSC-Regular, PingFang SC, STHeitiSC-Light, Helvetica-Light, arial, sans-serif
  13. </style>
  15. <script type="application/json">
  16.   {
  17.     "pages": [
  18.       "./pages/index/index"
  19.     ],
  20.     "window": {
  21.       "backgroundTextStyle": "light",
  22.       "navigationBarBackgroundColor": "#fff",
  23.       "navigationBarTitleText": "WeChat",
  24.       "navigationBarTextStyle": "black"
  25.     }
  26.   }
  27. </script>

在src/pages创建Page

  1. <template>
  2.   <view class="page-container">
  3.     <list></list>
  4.   </view>
  5. </template>
  7. <script>
  8.   import {createPage} from '@mpxjs/core'
  10.   createPage({
  11.     onLoad () {
  12.     }
  13.   })
  14. </script>
  16. <style lang="stylus">
  17.   .page-container
  18.     font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif
  19. </style>
  22. <script type="application/json">
  23.   {
  24.     "usingComponents": {
  25.       "list": "../../components/list/list"
  26.     }
  27.   }
  28. </script>

修改src/component/list/list.mpx的代码：

  1. <template xmlns="">
  2.   <view class="list">
  3.     <!--增强指令 wx:style-->
  4.     <view wx:style="{{listStyle}}" wx:for="{{listData}}">{{item}}</view>
  5.     <!--增强指令 wx:class-->
  6.     <view wx:class="{{isViewClass ? viewClass : ''}}">{{testData}}</view>
  7.     <!--watch question改变answer-->
  8.     <view>{{question}}</view>
  9.     <view>{{answer}}</view>
  10.     <!--增强指令 wx:model，用于双向绑定-->
  11.     <input wx:model="{{model}}"/>
  12.     <input wx:model="{{testModel.model}}"/>
  13.     <input wx:model="{{testModel['model']}}"/>
  14.     <!--动态组件，此处的componentName为json中注册的usingComponents的key值-->
  15.     <component is="{{componentName}}"></component>
  16.   </view>
  17. </template>
  19. <script>
  20.   import {createComponent} from '@mpxjs/core'
  21.   import mixin from './mixin'
  22.   createComponent({
  23.     mixins: [mixin],
  24.     data: {
  25.       model: '我是测试model双向绑定',
  26.       testModel: {
  27.         model: '我是测试model双向绑定'
  28.       },
  29.       listData: {
  30.         'phone': '手机',
  31.         'tv': '电视',
  32.         'computer': '电脑'
  33.       },
  34.       isViewClass: true,
  35.       viewClass: 'white-color',
  36.       listStyle: {
  37.         color: '#fff'
  38.       },
  39.       question: '我是测试watch用的',
  40.       answer: '我也是测试watch用的!',
  41.       componentName: 'testA'
  42.     },
  43.     ready () {
  44.       // mixinTestData来自mixin
  45.       console.log('component ready:', this.mixinTestData.tv)
  46.       setTimeout(() => {
  47.         this.changeData()
  48.         // 可以看到data可直接修改，实现了computed功能。
  49.         this.listData.phone = '110'
  50.         this.componentName = 'testB'
  51.       }, 2000)
  52.     },
  53.     computed: {
  54.       testData () {
  55.         return JSON.stringify(this.listData)
  56.       }
  57.     },
  58.     pageShow () {
  59.       // 所在页面显示之后就会执行一次
  60.       console.log('page show')
  61.     },
  62.     pageHide () {
  63.       // 页面切入后台执行
  64.       console.log('page hide')
  65.     },
  66.     watch: {
  67.       question(newval, oldval) {
  68.         this.answer = '我是测试观察属性watch'
  69.       }
  70.     },
  71.     methods: {
  72.       changeData() {
  73.         this.question = '我是测试观察属性watch'
  74.       }
  75.     }
  76.   })
  77. </script>
  79. <style lang="stylus">
  80.   .list
  81.     background-color red
  82.   .white-color
  83.     color #fff
  84. </style>
  86. <script type="application/json">
  87.   {
  88.     "component": true,
  89.     "usingComponents": {
  90.       "testA": "./testA",
  91.       "testB": "./testB"
  92.     }
  93.   }
  94. </script>

更多用法可以看这个todoMVC示例：https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC