dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 512|回复: 0

[其他] 小程序开发工具与基础之环境搭建与工具

[复制链接]
  • TA的每日心情

    2024-2-20 11:15
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    878

    主题

    4343

    帖子

    3987

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3987

    发表于 2020-3-17 17:50:10 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    小程序开发准备
    1、申请小程序账号(appid)
    2、下载并安装微信开发者工具

    进入微信公众平台 https://mp.weixin.qq.com/
    立即注册小程序

    1.png

    按照信息填写之后完成注册
    具体操作可查看小程序官方开发文档

    使用注册的小程序账号密码,登录 https://mp.weixin.qq.com/
    在菜单-设置-开发者设置中,查看小程序的appID
    2.png



    下载并安装微信开发者工具
    3.png


    选择适合自己操作系统的最新稳定版本,傻瓜式下载安装即可

    4.png

    新建小程序项目
    (没有appID可以暂时先使用测试号)
    不过现在个人是可以注册小程序的,还是建议注册一个,因为测试号有很多限制


    5.png



    小程序属于前端开发,单独的小程序是没有意义的
    而完整的应用不仅要有前端,还需要服务器的支持(后端给前端提供数据)
    小程序后端可以使用后端语言来开发,比如java python php node.js ,不懂后端的可以使用小程序云开发

    6.png


    进去以后的默认页面是这样的,微信头像+微信名,怎么这么大……

    微信开发工具UI简介与小程序调试方法
    创建类型:

    7.png

    如果选择page,会生成4个文件 .js  .json  .xml  .xss

    如何查看快捷键:
    鼠标移动到代码区域,按F1,会出现所有操作及快捷键

    8.png


    如何运行代码:
    1、点击编译

    9.png


    2、小程序有自动编译功能
    编辑完代码之后按ctrl+s保存即可自动编译

    清缓存:

    11.png

    如何查看项目的配置信息和状态:
    点击设置-项目设置

    12.png


    13.png

    或者点击右上角的详情

    14.png


    关于调试:
    1、console.log打印变量进行查看
    2、断点调试,在控制台sources点击对应文件,左侧可以进行打断点操作
    然后再点击下编译

    15.png

    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2024-4-26 08:24 , Processed in 0.242105 second(s), 36 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表