zoukankan      html  css  js  c++  java
  • 微信·小程序开发工具安装指南及注意事项

    这两天闲来无事,也安装了 “微信折叠”的开发工具来玩一下。以下是一些小道消息及使用体验,过两天我会写一篇文章以开发者的角度来详细评价微信小程序:

    • 微信小程序不能开发游戏类、直播类功能,小程序每个人关注的上限是20个(还不确定,不过我相信这是真的,这次公布的API里并没有视频组件。微信太大,苹果要有所顾忌,但是微信也要做出相应的让步)
    • 微信目前有没有同苹果商谈好,还是个未知数,毕竟会对AppStore有一定的冲击。

    • 抛弃了大量的javascript组件后,这个生态体系变得相当的封闭,微信解释肯定是:为了更好的性能提升。那么我们拭目以待。

    • 小程序的入口是微信里的三级菜单,就是在“Tab栏发现里的游戏下面加入一个“小程序”。反正,这一栏里的购物和游戏我是从来没点进去过的。

    • 以腾讯的尿性,小程序同服务号一样,其关系链及重要功能的开放程度会因“人”而异。对,优质的接口只会开放给腾讯的儿子们(滴滴呀、京东呀)

    • 微信从来就是一眼不合就封杀,优步就是很好的案例。官方解释是优步涉嫌诱导,滴滴同样被禁过。利益面前还讲道理?反正我是不信的。腾讯的投资覆盖各个行业,一旦腾讯掌握了应用分发入口,给儿子们一些小小的甜头,应该不是什么大事儿吧。有人说AppStore也有很多限制,但至少苹果并没有像腾讯这样大量的投资消费级App,直接产生利益冲突的点并不多。话说回来,这点创业者是不用考虑的,暂时,你的产品和创意,在微信眼里还是个蝼蚁。。。你不用担心受到不公正的对待。如果真有一天你被微信封杀了,只要不是因为违规内容,那么你应该高兴,然后迅速炒作一波…….

    • 很多做Web的朋友尝试在小程序里写div、ul等标签,别试了,没效果,包括JQUERY在内的DOM操作库,小程序内是不能运行的。小程序本质是JS+ReactNative,对RN底层做了重构,已经和dom说拜拜了。

    下面是详细的安装步骤(9月24日更新)。注意:9月23日给出的微信小程序开发者工具0.7和0.9破解版本已过时。微信官方已给出了不需要破解的0.9.092300版本。win10下测试通过

    以下是安装步骤:

    1. 按操作系统下载相应开发工具版本

       windows 64位

       windows 32位

       mac

       小程序示例组件demo下载

    2. 双击安装

    3. 打开微信web开发者工具

    4. 添加一个项目,如图

    5. 填写项目信息 注意AppId这里选择“无AppId”,AppID只有内测用户才有,无AppId在目前有功能限制,比如不能发布项目到手机微信中预览。

    6. 点击“添加项目”按钮后,将创建一个小程序项目, 工具已经为你创建了一个demo —– Hello World

    开发者工具功能区域介绍

    工具左侧分别有编辑、调试、项目调试区按钮,分别解释3个区域的作用.。

    编辑: 是你写代码的地方,左侧的文件目录是微信为你创建的一个项目基础骨架,你可以在这个骨架上编写自己的业务代码。当我们编写完代码后,点击编辑视图左下角的“编译”即可进行调试和运行(当点击“编译后”,工具视图会自动跳转到第二个“调试”视图)

    调试: 是你调试代码的地方。整个界面同Chrome的调试工具一模一样(应该是内嵌了WebKit内核),相信有Web开发经验的同学很快就能上手。F8 运行到下一个断点、F10 单步运行、Ctrl+/ 注释代码。

    解释一下“调试”视图下,顶部的六个Tab栏(Console、Sources、Network、Storage、AppData、Wxml):

    Console: 工具的输出区域,在程序中调用 console.log(‘测试一下console’), 可在这里输出自定义调试信息。同时,这里也是工具遇到异常和发出警告的信息输出区域。见图:

    console

    Sources: 源代码显示区域,这里你可以打断点并调试代码。Sources Pannel 用于显示当前项目的脚本文件,同浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以在 Sources Pannel 中开发者看到的文件是经过处理之后的脚本文件,同编辑区域的代码有稍许的差异,比如开发者的代码都会被包裹在 define 函数中,并且对于 Page 代码,在尾部会有 require 的主动调用。

    Network: 用于观察和显示 网络的request 和 socket 的请求情况

    Storage: 如果你在程序中使用了 wx.setStorage 或者 wx.setStorageSync 后,在这里将会显示你的数据存储情况。是的,小程序支持本地缓存数据。

    AppData: 用于显示当前项目当前时刻 appdata 具体数据。可以在这里管理应用程序中的各类变量(不同于Storage中的缓存变量,只有调用wx.setStorage 或者 wx.setStorageSync 的数据才会出现在Storage中)。在这,你可以随时修改变量,工具将把变量改变在左侧预览视图中实时显示。我们可以看到,AppData 以页面(pages/index/index)作为分组单位,每个页面只会显示自己的AppData,非常的清晰。

    Wxml:将Wxml标签同预览界面实时关联,在这里可以看到真实的页面结构以及结构对应的 wxss 属性,同时可以通过修改对应 wxss 属性,在模拟器中实时看到修改的情况。通过调试模块左上角的选择器,还可以快速找到页面中组件对应的 wxml 代码。

    最后说下“项目”这个功能区块儿, 项目实际上是用来上传和预览项目的。微信要求所有发布的小程序都必须审核,所以需要在这里将小程序上传(应该是类似于AppStore,但肯定不是AppStore的发布模式,苹果应该不会允许。小程序目前同用户的接触方式还是未知数,而这恰恰是最重要的一块儿)。如果你没有被内测邀请,这里你是不可以上传和预览项目的,也不可以真机运行小程序,所以真正的体验相对于原生App还是未知数。目前阶段,你只能熟悉一下小程序的API,以便在公测后迅速拿出自己的产品,抢夺第一波红利。

    总体来说,小程序的大概开发模式和模型 已经暴露,其本质是JS+RN,很多人说JavaScript程序员的春天来了,其实小程序的体系和Web开发还是有很多区别的。微信言下之意是要抛弃你们熟悉的DOM采用他的组件体系,更熟悉这种组件式开发的不是传统的Web前端,而是iOS开发人员(更早点你可以追溯到Flex和SilverLight),我本人是不喜欢这种非JS原生的组件式开发的,自由度会受限。后续,我会持续更新小程序的开发例子和教程,尽快帮助大家上手开发业务和产品。你现在需要做的,就是静心想想,我应该开发一个什么样的产品?

    关注 我的个人博客 www.imayi.me

  • 相关阅读:
    (BFS 二叉树) leetcode 515. Find Largest Value in Each Tree Row
    (二叉树 BFS) leetcode513. Find Bottom Left Tree Value
    (二叉树 BFS DFS) leetcode 104. Maximum Depth of Binary Tree
    (二叉树 BFS DFS) leetcode 111. Minimum Depth of Binary Tree
    (BFS) leetcode 690. Employee Importance
    (BFS/DFS) leetcode 200. Number of Islands
    (最长回文子串 线性DP) 51nod 1088 最长回文子串
    (链表 importance) leetcode 2. Add Two Numbers
    (链表 set) leetcode 817. Linked List Components
    (链表 双指针) leetcode 142. Linked List Cycle II
  • 原文地址:https://www.cnblogs.com/aswindguy/p/5905028.html
Copyright © 2011-2022 走看看