anu小程序快速入門

時間 2019-11-07

標籤 anu 程序快速入門简体版

原文原文鏈接

衆所周知，微信推出小程序以來，可謂火遍大江南北，就像當前互聯網興起時，你們忙着搶域名與開私人博客同樣。小程序之因此這麼火，是由於微信擁有龐大的用戶量，而且騰訊幫你搞定後臺問題及衆多功能問題（如分享，支付，視頻播放，文件上傳），至關於你一我的也能作一個公司的事情。在手機上，每一個人不可能裝超過100個以上的APP，所以這麼多小公司想生存下來很不容易，但傍上微信這個大平臺，我的也能出一個有上千萬人玩的爆款遊戲，也能搞一些小商城，避開淘寶京東的鋒芒。對於大公司，這也是一個賺錢導流的新途徑。相信從此，小程序會愈來愈火。javascript

可是，小程序對開發人員來講，則不怎麼給力。它的API很是原始，沒有類繼承，npm支持滯後，不能使用CSS預處理器。因而市面上出現各類轉譯框架。轉譯框架與咱們經常使用的框架不太大同樣，轉譯框架是將咱們寫的代碼翻譯成小程序支持的各類文件形式，好比說wxml, wxss。而轉譯框架在編寫業務時，容許咱們使用更爲流行的框架形式來寫（之因此說形式，由於以vue方式寫，它實際不是跑一個真正的vue，以react方式寫，也不是跑一個真正的react）。因爲小程序不存在DOM，所以流行那幾個框架是沒法跑在微信中，但能夠用它們的仿造品。html

轉譯框架的最高目標是統一公司的技術棧，讓以react爲技術棧的公司不用再搞vue，爲vue爲技術棧的公司不用學react。這在招聘與維護上有很大優點。vue

目前，市面上的轉譯框架有wepy, mpvue, taro。前二者是vue風格，使用的是vue1的語法，但仍是有這麼多vue語法沒法支持。taro是京東近半年出品的，react風格，目前還不夠穩定，最大的問題是組件不包含組件。java

好了，到本文的主角出場。anu本來是一個迷你React框架，對react16的兼容程度很是高，能跑react-router, react-redux, antd， rematch等等。而anu小程序只是在其上面的一個擴展，爲它添加了一個cli及一個新的render.cli用在編譯期，將JSX轉換成wxml等，而miniapp render用在運行期，讓它跑在微信內部。react

因爲小程序的限制，一切涉及DOM的API都不能用，即findDOMNode, dangerouslySetInnerHTML及refs.dom。目前也不支持使用render props時，由於wxml裏面不能運行函數。其餘，均可以正常使用，包括git

各類生命週期鉤子，頁面組件還有componentDidShow, componentDidHide兩個新鉤子
div, h1, span, b等html標籤
用戶已經用小程序方式寫好的各類組件
事件裏面能夠傳參，屢次bind this(這是一個重大特殊，其餘轉譯框架作不到)
多重循環支持
es6, es7語法糖支持
組件標籤包含組件標籤（solt機制）
無狀態組件的支持
onClick屬性自動映射成bindtap
React.wx對象擁有原wx對象的全部方法，而且對全部請求接口進行Promise化
提供兩個通用別名@components與@react，方便用戶import React與通用組件目錄的內容

說了這麼多，咱們看一下如何使用。es6

1.到https://github.com/RubyLouvre... 下載anugithub

git clone https://github.com/RubyLouvre/anu.git

2.進入anu/packages/cli目錄，執行npm link命令（若是以前執行過，須要npm unlink）npm

3.回到anu目錄，這時可使用mpreact <projectname>建立一個小程序項目redux

4.執行npm start命令，構建工程

5.而後使用微信開發工具，打開<projectname>下面的dist目錄

做爲一個演示項目。去哪兒網模板包含一些簡單的使用演示。你們能夠用 vs code打 <projectname>。src目錄是源碼，dist目錄是最終生成給微信運行的代碼。

根據微信小程序的要求，src 主要分爲三大塊， app.js， pages目錄的頁面組件， components目錄的通用組件。

app.js會import全部用到的頁面組件的JS文件

頁面組件的源碼與生成代碼大概以下

import React from '@react';
import Dog from '@components/Dog/index';

class P extends React.Component {
    render() {
        return (
            <div>
                <div>類繼承的演示</div>
                <Dog age={12} />
            </div>
        );
    }
}

export default P;

會生成兩個文件

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _ReactWX = require("../../../../ReactWX");
var _ReactWX2 = _interopRequireDefault(_ReactWX);
var _index = require("../../../../components/Dog/index");
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : { default: obj };
}
function P() {}
P = _ReactWX2.default.miniCreateClass(
    P,
    _ReactWX2.default.Component,
    {
        render: function() {
            var h = _ReactWX2.default.createElement;

            return h(
                "view",
                null,
                h("view", null, "\u7C7B\u7EE7\u627F\u7684\u6F14\u793A"),
                h(_ReactWX2.default.template, {
                    age: 12,
                    templatedata: "data09558693",
                    is: _index2.default
                })
            );
        },
        classUid: "c70258"
    },
    {}
);
Page(_ReactWX2.default.createPage(P, "pages/demo/syntax/extend/index"));

exports.default = P;

wxml

<import src="../../../../components/Dog/index.wxml" />
<view>
   <view>類繼承的演示</view>
   <template is="Dog" data="{{...data}}" wx:for="{{data09558693}}" wx:for-item="data" wx:for-index="index" wx:key="*this"></template>
</view>