微信小程序从零开始开发步骤(一)搭建开发环境

时间:2022-10-28 16:47:24

从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了。

1:注册

用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,网址: https://mp.weixin.qq.com/ 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。注册完成之后开始登录。

微信小程序从零开始开发步骤(一)搭建开发环境

2:登录 https://mp.weixin.qq.com

我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。有了小程序帐号之后,我们需要一个工具来开发小程序。

根据官方教程进行开发https://mp.weixin.qq.com/debug/wxadoc/dev/

微信小程序从零开始开发步骤(一)搭建开发环境

3:安装开发工具

前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!我的电脑是64位的:

微信小程序从零开始开发步骤(一)搭建开发环境

4:安装完成之后

你的第一个小程序开启:新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,最后,勾选 "创建 QuickStart 项目" (注意: 你要选择一个空的目录才会有这个选项),点击确定,你就得到了你的第一个小程序了,点击顶部菜单编译就可以在 IDE 预览你的第一个小程序。

微信小程序从零开始开发步骤(一)搭建开发环境

微信小程序从零开始开发步骤(一)搭建开发环境

微信小程序从零开始开发步骤(一)搭建开发环境

5:编译预览

点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现,也可以点击预览按钮,通过微信的扫一扫在手机上体验你的第一个小程序。OK,你已经成功创建了你的第一个小程序,并且在微信客户端上体验到它流畅的表现。

微信小程序从零开始开发步骤(一)搭建开发环境

小程序初始化目录介绍:

1:page 页面文件夹 存放项目页面渲染相关文件

微信小程序从零开始开发步骤(一)搭建开发环境

2:utils 存放js库和数字格式化文件

微信小程序从零开始开发步骤(一)搭建开发环境

3: 配置文件

微信小程序从零开始开发步骤(一)搭建开发环境

参考链接:https://www.jianshu.com/p/1eb4885a4cc1

阅读链接:

微信小程序从零开始开发步骤(一)搭建开发环境https://www.jianshu.com/p/0ff8c3b2f59f

微信小程序从零开始开发步骤(二)创建小程序页面https://www.jianshu.com/p/fe0db14e2869

微信小程序从零开始开发步骤(三)底部导航栏https://www.jianshu.com/p/89a63dc99839

微信小程序从零开始开发步骤(四)自定义分享的功能https://www.jianshu.com/p/65d9bdb8051d

微信小程序从零开始开发步骤(五)轮播图https://www.jianshu.com/p/bc3261557031

微信小程序从零开始开发步骤(六)4种页面跳转的方法https://www.jianshu.com/p/01a5a6a0fdb9

微信小程序从零开始开发步骤(七)引入外部js 文件https://www.jianshu.com/p/5f2cde64d7f2

微信小程序从零开始开发步骤(八)引入框架WeUI:https://www.jianshu.com/p/fd423b6e17be

微信小程序从零开始开发步骤(一)搭建开发环境的更多相关文章

  1. 微信小程序从零开始开发步骤(八)引入框架WeUI

    首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...

  2. 微信小程序从零开始开发步骤(七)引入外部js 文件

    上一章讲到小程序页面的四种常见的跳转的方法,这一章写如何引入一个外部的js文件,既utils文件夹的用处,其实步骤很简单: 1:准备好外部想要引入的外部文件,命名为util.js,并且填充固定的文件内 ...

  3. 微信小程序从零开始开发步骤(六)4种页面跳转的方法

    用法:用于页面跳转,相当于html里面的<a></a>标签. API教程:https://mp.weixin.qq.com/debug/wxadoc/dev/component ...

  4. 微信小程序从零开始开发步骤(五)轮播图

    上一章完成页面自定义分享,这一章来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. Swiper是滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常 ...

  5. 微信小程序从零开始开发步骤(四)自定义分享的功能

    上一章节,实现了小程序的底部导航的功能,这一节开始实现一些简单的功能.本章节介绍的是小程序的自定义分享的功能. 可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一 ...

  6. 微信小程序从零开始开发步骤(三)底部导航栏

    上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...

  7. 微信小程序从零开始开发步骤(二)创建小程序页面

    上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是 要创建一个简单的页面了,创建小程序页面的具体几个步骤: 1. 在pages 中添加一个目录 选中page,右击鼠标,从硬盘打 ...

  8. 微信小程序从零开始开发步骤(四)

    上一章节,实现了小程序的底部导航的功能,这一节开始实现一些简单的功能.本章节介绍的是小程序的自定义分享的功能. 可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一 ...

  9. 微信小程序从零开始开发步骤(三)

    上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...

随机推荐

  1. 打开IE错误解决方法

    1. 502.1 Internal Server Error Handle svc-Integraged has a bad module ManagedPipelineHandle解决方法:此种情况 ...

  2. CF448C Painting Fence (分治递归)

    Codeforces Round #256 (Div. 2) C C. Painting Fence time limit per test 1 second memory limit per tes ...

  3. javascript 常用方法

    1. 判断某个object中是否包含某个属性: params.hasOwnProperty($scope.dataObj[i].alias) //true 包含 2.删除object中指定属性 del ...

  4. localdb链接字符串

    <add name="GitCandyContext" connectionString="Data Source=(localdb)\v11.0;Integrat ...

  5. 如何提取HTML代码中img的src地址?

    答案:专门的代码 使用专门的正则表达式 /// <summary> /// 获得HTML中所有图片的src地址[比较稳定的一个版本] /// </summary> /// &l ...

  6. Remoting

    一.      Remoting基础 什么是Remoting,简而言之,我们可以将其看作是一种分布式处理方式.从微软的产品角度来看,可以说Remoting就是DCOM的一种升级,它改善了很多功能,并极 ...

  7. dotfiles for linux&sol;unix users automatically&excl; &lpar;python Vim IDE&rpar;

    Here is a brief introduction and package of dotfiles for linux/unix user. I think there are enough i ...

  8. 初学CSS-3-文字的属性

    文字样式属性: 格式:font-style:italic;/normal; 快捷键:fsi / fsn + tab键 文字粗细属性: 格式:font-weight:bold;/bolder;/ligh ...

  9. JIRA项目管理搭建

    部署JIRA 7.2.2 for Linux 转自:http://www.yfshare.vip/2017/05/09/%E9%83%A8%E7%BD%B2JIRA-7-2-2-for-Linux/ ...

  10. iOS transform解决连续多次旋转缩放,实现图片旋转缩放效果

    一.需求 实现imageView的缩放旋转效果,一般有两种方式: 1.底层加scrollview,利用scrollview的属性实现.(推荐这种,这是我比较后发现的,手势做缩放旋转会有点弊端) 2.利 ...