微信小程序学习日志:创建第一个微信小程序

原创 2018年04月15日 17:35:24

首先,在已有小程序账号和填写完基本信息的前提下,打开微信开发者工具,点击小程序项目


然后出现下图所示窗口,在项目目录里填上你所期望的小程序根目录,如果这一栏不填,开发工具会自动添加一个根目录,建议自己设置根目录比较好;AppID填写在小程序微信公众平台开发设置中找的小程序id;项目名称是传统的helloworld。初学的话建议别勾选下面的建立模板。接着点 确定 。


点击编译界面左上方的加号,创建app.js文件


app.js文件是注册小程序的,我们可以调用一个空的App函数App({})


我们创建一个文件夹来保存页面的配置。首先,创建一个名为pages的目录,然后在这个目录里创建一个名为helloworld的目录用来保存helloworld页面的配置。


在hellowworld目录下创建helloworld.js,helloworld.json, helloworld.wxml, helloworld.wxss文件。


helloworld.js文件是为这个小程序页面注册的文件,和app.js一样,先写一个空的函数Page({})


然后在helloworld.json里填入一个空的配置对象{}


接着编辑helloworld.wxml文件用来描述该页面内容,写上下面代码

<view>HelloWorld</view>

helloworld.wxss文件是用来配置页面内容样式的文件,可以什么都不写,页面内容会以默认方式显示。但这里我们配置一下宽度和高度以及位置

view{
width: 100%;
height:40rpx;
text-align:center;
}


页面内容已经配置完成了,现在需要向小程序注册页面的路径。在首页,即直接点编辑器左上角加号创建一个app.json的文件

写上如下代码,代码里包含了helloworld页面的路径(从根目录往后的路径)

{
"pages":[
"pages/helloworld/helloworld"
]
}


最后,点击工具栏的编译按钮,左侧编译器表示如下图。。。。哦耶,第一个小程序诞生


动手写第一个微信小程序

微信小程序开放公测了,目前公测面向的用户主要是政府、企业、组织,暂时不对个人开发者开放注册。 注册请前往微信公众平台注册 微信小程序注册 下载微信web开发者工具并打开quickStart工...
  • linshijun33
  • linshijun33
  • 2016-11-06 23:33:38
  • 1134

微信小程序日记(一)

安装好开发环境之后打开,输入appid、项目名、目录,由于目前没有申请appid所有选择无appid,创建完成!大概是4类文件,js、wxml、wxss、json。 js:脚本文件;wxml:页面结构...
  • a61595579
  • a61595579
  • 2017-03-29 17:29:35
  • 1047

我的第一个微信小程序

1. 前言牛客网第三期编程作业是体验下微信小程序的编写, 由于本菜鸟对前端这块理解并不深入,整起来比较费劲, 突然想到一个idea, 顺手简单实现一下, 基本效果如下: 2. 参考资料很快论坛 官...
  • zhyh1435589631
  • zhyh1435589631
  • 2016-11-13 16:34:56
  • 1228

傻瓜式教程“第一个微信小程序”

一、下载小程序开发工具 登录“微信公众平台”官网,点击小程序中的“开发” 点击“工具” 点击左下角“下载” 根据自己对应的系统下载,我的电脑是windows 64位,所以下载64位 自己选择...
  • haohao0808
  • haohao0808
  • 2016-11-08 13:41:03
  • 1838

微信小程序的吐血日记(1)

微信小程序的吐血日记 工作需要,开始接触微信小程序,一脸懵逼的踏上挖坑之旅...
  • u013632854
  • u013632854
  • 2017-03-27 22:47:47
  • 639

微信小程序开发日志

花了几天时间撸了一遍微信小程序的官方文档,大体了解了小程序开发的基本的过程和涉及到的一些基本的概念。由于我之前搞过一段时间的Android开发(做个手机遥控的智能小车和自动浇花器),所以发现小程序里的...
  • zyembed
  • zyembed
  • 2018-01-17 10:09:22
  • 94

微信小程序学习之路(一)

小程序开发简易教程: 获取AppID https://mp.weixin.qq.com – 设置 – 开发者设置中 下载开发者工具 创建项目 a...
  • github_38847071
  • github_38847071
  • 2017-06-14 17:11:31
  • 1185

微信小程序学习笔记(1)----学习资料整理

微信小程序破解教程微信小程序只对少部分开放公测名额,大部分人都是没有权限,所以想要体验微信小程序开发还是需要破解一下的,破解方法比较简单,GitHub上早已有了破解教程https://github.c...
  • whzhaochao
  • whzhaochao
  • 2016-09-28 16:36:08
  • 3119

微信小程序学习视频

  • 2017年11月27日 10:53
  • 48B
  • 下载

微信小程序--后端管理平台业务--日志以及lombok相关

本次开发没有使用lombok,关于它的使用详细使用文献:http://blog.csdn.net/sunsfan/article/details/53542374 这个不知道有没用:http://w...
  • sinat_24048051
  • sinat_24048051
  • 2017-09-04 15:32:26
  • 313
收藏助手
不良信息举报
您举报文章:微信小程序学习日志:创建第一个微信小程序
举报原因:
原因补充:

(最多只允许输入30个字)