开始

使用脚手架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目录

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

扩展

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

下面看一个例子:

例子

开始一个demo项目的流程。

初始化项目:
安装项目

接下来:

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

开启服务

用微信开发者工具打开目录 ~/testproject/mpx-test/dist ,注意要到dist目录

在src/app.mpx创建一个App

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

在src/pages创建Page

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

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