/mini-program-cljs-example

mini-program-cljs(ClojureScript微信小程序库)开发者的示例项目和文档

Primary LanguageJavaScript

mini-program-cljs(ClojureScript微信小程序库)开发者的示例项目和文档

本文档适用于: MacOS和Emacs开发者, Linux微信开发者工具基于Wine编译小程序速度太慢

Youtube 演示视频

1. git clone本项目和wechat-clj下来到本地,第一次用微信开发者工具打开本项目(即导入本项目到开发者工具), 并打开安全设置, 然后完全关闭微信开发者工具(请确保进程关闭)

Youtube演示视频

2. 填入下面配置到deps.edn文件

;; deps.edn 需要填入你本地的mini-program-cljs库的路径
mini-program-cljs      {:local/root "/Users/clojure/CljPro/wechat-clj/mini-program-cljs"}

3. 执行安装模拟器

# 需要填入mini-program-cljs-example的项目路径
./npm_build.sh ~/WeChatProjects/mini-program-cljs-example

4. 启动开发者的模拟器

# 需要填入mini-program-cljs-example的项目路径
./open_cli_ws.sh ~/WeChatProjects/mini-program-cljs-example

5. Emacs打开src/mini_program_cljs_example/core.cljs,并在该文件buffer下执行下面命令

M-x cider-jack-in-cljs => 选择 shadow-cljs => 选择 node-repl

;; 如需开发宏,在cljs的cider repl下执行:
M-x cider-connect-sibling-clj

6. 启动Repl开发: C-x C-e执行src/mini_program_cljs_example/core.cljs中的代码,确认mini-program-cljs能正常连接到mini-program-cljs-example的repl来

(ns mini-program-cljs-example.core
  (:require-macros
   [mini-program-cljs.macro
    :refer [call-promise-1 wx-fun-dev wx-fun evaluate-args c-log]])
  (:require
   ;; 开发mini-program-cljs库时需要引用miniprogram-automator模拟器
   [miniprogram-automator :as automator]
   [mini-program-cljs.core :as mini-cljs]
   [mini-program-cljs.js-wx :refer
    [mini-program current-page] :as jswx]))

;; 1. 初始化mini-program变量: 操作微信开发者工具的模拟器的变量mini-program
(jswx/reset-mini-program automator)

;; 2. 初始化current-page变量: 当前微信小程序的页面
(jswx/reset-current-page)

;; mini-program 成功获取的样子
;; => #object[cljs.core.Atom {:val #object[MiniProgram [object Object]]}]

;; current-page 成功获取的样子
;; => #object[cljs.core.Atom {:val #object[Page [object Object]]}]#object[cljs.core.Atom {:val #object[Page [object Object]]}];; => #object[cljs.core.Atom {:val #object[Page [object Object]]}]

;; 打印日志到微信开发者控制台
(c-log @mini-program "aaaa" "bbb" "cccc"
  #js {:aaa 111 :bb "222dsadsa" :cc #js {:ooo 11 :bb "33"}})

;; 日志弹窗到页面
(jswx/log #js {:aa 11} #js {:bb 22 :cc 33})

;; 万能的eval
(evaluate-args @mini-program
  (fn [arg1 arg2]  (js/console.log arg1 "," arg2))
  "Hi, " #js {:name "mini-program-cljs"})

evaluate-args 使用: 和微信开发者工具的控制台是完全联通的,但是不能用cljs.core方法在里面测试(因为goog导入不了)

  • 传入cljs的函数作为参数进去会变成字符串,编译后的cljs代码的字符串
  • 传入js的函数,会变成native code的字符串
(evaluate-args @mini-program
  (fn [arg]
    (js/console.log "---"
      (let [pages (js/getCurrentPages)
            len (.-length pages)
            current-page (aget pages (dec len))]
        current-page)
      )
    )
  #js [1 2 3])
;;=> 打印出来 page对象了

(evaluate-args @mini-program
  (fn [arg]
    (js/console.log "---"
      (let [app (js/getApp)]
        (.-globalData app)
        )
      )
    )
  #js [])
;;=> 打印出来app.globalData


;;变量共享: 可以在控制台上看到这个变量
(evaluate-args @mini-program
  (fn [arg1]
    (js/console.log "---"
      (set! js/aabb arg1)
      )
    )
  #js [1 2 3])

;; this使用: 下面代码会打印出来`window {...}`
(evaluate-args @mini-program
  (fn [arg1]
    (js/console.log "---"
      (this-as this
        this)
      )
    )
  #js [])
  • 成功设置好的开发环境如下截图

基于S表达式Postwalk分离出来三种不同的代码执行环境: 关于evaluate-args(微信控制台环境) 和 wx.* 的环境 还有 current-page内部, 三者的开发环境的Repl开发打通方案

  • 三个环境的混合wx,page内部,控制台, 通过错误分析来S表达式分开来分别执行后组合起来
  • evaluate-args内部没有cljs的执行环境,所以如果catch到cljs未定义的错误,那么就分离出来需要cljs的部分和不需要cljs的部分, 不需要cljs的部分执行结束后保存到中间变量里面, 将结果传递出来给cljs的代码处理
  • S表达式解析和Postwalk新的cljs解释器的构建,分离出来代码需要不同的执行环境,执行并且返回结果最终组合起来: repl一个本地环境模拟出来三种环境才是对的选择,解耦甚至可以脱离微信开发者工具你的开发的解释工具还能解释所有情况,那么这就是一个合格的开发环境了