• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >微信小程序 > 微信小程序开发系列(一)开发准备的详解

微信小程序开发系列(一)开发准备的详解

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-11-30

匿名通过本文主要向大家介绍了微信小程序等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本文带来微信小程序开发系列(一)开发准备的详解

一:开发准备

一 注册微信开发者账号

登录:https://mp.weixin.qq.com/ 进行注册.

目前仅支持企业和组织等非个人注册微信小程序账号,注册详细情况可以参见如下链接:

http://kf.qq.com/faq/140806zARbmm161103r6vmiA.html

注:如果仅仅是为了学习开发微信小程序,可以参考这个地址注册测试号:


二 微信开发者工具下载

由于微信公众平台改版,导致原来可以在https://mp.weixin.qq.com/wiki下面可以免费下载微信小程序开发工具这种可能没有了。

必须拥有微信小程序的开发账号,在如下网址下载扫描二维码下载开发工具。

https://mp.weixin.qq.com/debug/wxadoc/introduction/#登录

另外如果只是学习开发而已,可以在百度搜索微信小程序开发工具随意下载网友分享的工具也可以。

二:开发工具使用简介

1:PC桌面打开微信小程序开发工具(微信web开发者工具),如图1所示:

微信小程序开发系列(一)详解

图1

2: 用微信扫描图1中的二维码,如图2所示,并选择第一项“本地小程序项目”,如图3所示。(现在如果开发工具版本太低,扫描时会报错,请先升级开发工具,开发工具会自动检查版本并自动升级。)

微信小程序开发系列(一)详解

图2

微信小程序开发系列(一)详解

图3

3: 图3中如果第一次创建项目,请选择“添加项目”,否则选择已经添加的项目。选择“添加项目”,如图4所示。

微信小程序开发系列(一)详解

图4

4: 图4中如果仅仅是为了学习开发请选择“无AppID”,然后填写项目名称,选择项目目录,并且点解“添加项目”按钮。如图5所示,进入微信小程序开发工具主界面。

微信小程序开发系列(一)详解

图5

5: 图5中点击工具左上角的“编辑”,工具进入编辑模式界面,如图6所示

微信小程序开发系列(一)详解

图6

6: 图5中点击工具左上角的“调试”,工具进入调试模式界面,如图7所示

微信小程序开发系列(一)详解

图7

7: 图7中点击工具左下角的“后台”,此时程序模拟当电话打来时,微信小程序进入后台的状态,如图8所示

微信小程序开发系列(一)详解

图8
三:工程目录结构

1:打开微信小程序开发工具,进入编辑模式,如下图1所示

微信小程序开发系列(一)详解

图9

1:这个项目主要由pages/firstPage,pages/index,pages/logs,这几个文件夹组成,这几个文件夹主要描述整个小程序的界面信息。

每个文件下基本可以分为:.js,.wxml,.wxss,.json等文件组成。

例如:

index.js:描述index页面的逻辑信息(类比:js代码)

index.wxml:描述index页面的布局信息(类比:HTML页面布局)

index.wxss:描述index页面的布局的样式信息(类比:CSS信息)


2:项目总体配置信息:

由app.js,app.json,app.wxss三个文件组成

app.json:由图1所示,描述整个工程的页面信息(由"pages"描述),"window"主要描述该项目整体背景,导航栏等样式,如果某个文件夹中某个.json文件中有相同的描述,则会覆盖"window"中描述的信息。

app.wxss:主要描述该项目整体的样式,如图2所示

微信小程序开发系列(一)详解

图10

app.js:主要描述该项目入口逻辑,主要描述一些用户登录后的信息,如图3所示

微信小程序开发系列(一)详解

图11

以上就是微信小程序开发系列(一)开发准备的详解的详细内容,更多请关注微课江湖其它相关文章!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2018-11-30微信小程序 action-sheet详解及实例代码
  • 2018-11-30微信小程序获取用户手机号代码分享
  • 2018-11-30小程序需要注意哪些点
  • 2018-11-30小程序popupwindow弹出框的实现代码
  • 2018-11-30微信小程序支付及退款流程的介绍
  • 2018-11-30实现微信小程序添加手机联系人功能教程
  • 2018-11-30微信小程序template模板引用实例详解
  • 2018-11-30微信小程序:样式模板的使用
  • 2018-08-20小程序 API
  • 2018-11-30微信小程序实现跟随菜单效果和循环嵌套加载数据实例详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 微信小程序如何实现获取验证码后倒计时效果?(代码示例)
    • 开发微信服务器接口的实例教程
    • 微信小程序checkbox组件详解实例代码
    • 微信小程序 解决swiper不显示图片的方法
    • 微信小程序 action-sheet组件详细介绍
    • 微信小程序中video组件的介绍
    • 小程序内测申请教程
    • 微信小程序发送模版消息注意事项有哪些
    • 微信小程序 swiper制作tab切换实现
    • 关于图表插件的6篇文章推荐

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有