新手尝试编写微信小程序（1）——我的第一个微信小程序

微信小程序风靡全国已经好多年了，首先是微信小程序，后面百度等多个平台都发布了自己的小程序了，可我还从未尝试过开发一个玩玩，其实对于一个程序员而言，开发一个小程序实在不是什么难事情，所以今天就要聊此心愿，因为在后面的教学中需要用到小程序发布一些作业。废话不多说，下面正式开始我们的微信小程序开发。

一、准备工作
1、拥有一个微信公众号
开发一个微信小程序必须首先拥有一个微信公众号，如果么有公众号，那就去申请吧（不过现在的微信公众号申请貌似比较繁琐，需要耐心）！

2、进入公众号申请一个小程序
然后进入微信公众号，在左边的菜单中选择“小程序”即可进入小程序的注册界面，在注册的最后有一个小程序的服务类型选择，如果您是开发着玩，千万别选择医疗、教育等需要上传资质和证件的类型，你知道的很麻烦，如下图

建议选择工具类型，小的类型随便选

3、下载开发工作（IDE）
在上面菜单中选择工具，下载工具（根据自己的操作系统来选择）

4、安装开发工具
下载完，我们来安装，安装完成后我们就可以进入我们的程序编写了

二、在IDE中创建小程序获取AppID
1、创建小程序
点击完成运行程序，选择左边的小程序，然后在右边点击“+”号进入小程序项目设置，这我么选择默认的设置，先测试一个玩玩。当然，如果你一开始就要来“正经”的，那么锯需要把你以前申请小程序的APPID填写在这里了。

2、获取AppID
这个微信的AppID号在哪里找呢？还是在微信公众平台的小程序管理页面中，找到开发，进入到开发设置，如下图：

3、运行第一个小程序
填写好APPID，或者选择测试号直接进入，我们看到额界面不同，需要有云服务支持的app开发，我们后面讲，这里我们还是着重来看看一般的简单小程序怎么开发。

这个时候，我们可以看到编辑器分为左右两部分，左边的就是效果预览，右边的是代码编辑区。这就算是我们第一个微信小程序了。

要在这个基础上实现更多的功能帮我们需要了解代码编辑部分以及微信小程序的结构。在右边我们可以发现，有pages和utils两个文件夹，而每个文件夹及子文件夹中都有四类文件，js,json,wxml,wxss。这是为什么呢？
其实有过网页开发经验的童鞋就容易理解，js是脚本，xml是一种扩展标记语言（和HTML类似），xss就是样式文件定义页面格式和配色的。最后需要解释的就是json文件了，这个我们可以看成是一个轻量级数据库文件，本质上就是带有一定格式的数据存储文件。

这么一说，大家就应该都明白了，腾讯公司为了给微信做扩展应用，为了照顾面子没有直接使用xml和xss，而是在前面加了个微信的首字母W，当然，也还为其自身的需要做了些扩展，但最核心的东西没有改变，最无法改变的东西js和json没有改变。

三、代码修改，实现自己的需求
1、修改hello world
了解了这些，我们就可以来看看代码了，这里我们只看几个显而易见的代码行（其实能够清楚的将微信小程序默认的小实例的所有代码看懂，那么我们就可以放手开始正式编写自己的代码了），修改并验证一下这些代码的作用今天这个入门课就算完成任务了。

首先我们找到hello world的代码，如下图：

我们将其修改为“你好我的第一个微信小程序”

然后点击工具栏中的“编译”，立即可以在预览中看到效果：

2、修改页面获取用户信息
下面，我们来修改一下获取头像信息的函数，我们改为获取昵称及区域的函数，当我们点击的时候显示微信昵称和地区信息，首先我们将index.wxml中的提示信息修改一下，如图

然后，我们增加为信息部分增加一个用户区域：

编译预览效果：

3、增加自定义函数以及变量
最后，我们来修改程序文件，为我们的小程序添加一个自定义函数，然后显示在页面中。
在index.js中增加一个自定义函数myfun，代码如下：
事先，我们要在page的data中增加一个变量welcomeInfo，

接下来，我们定义并实现这个myfun函数：

4、函数及变量的调用
然后，不要忘记在page的onload中调用，否则在页面中就无法访问这个welcomeInof变量，调用后welcomeInfo就被赋值了。（我这里放在onload的最后调用的，调用函数的位置可以根据自己的喜好随便放置）

我们在页面中就可以显示出来了：

运行效果如下：

到此为止，我想已经是初步了解了微信小程序的变量定义、函数定义及调用以及最简单的页面显示方法。有关第一个程序中涉及的到setdata以及页面调用自定义函数等内容我们放到《新手尝试编写微信小程序（2）》中来探索。有需求的小伙伴请关注更新！

新手尝试编写微信小程序（1）——我的第一个微信小程序相关推荐

微信小程序开发与应用第一章微信小程序的基本知识1
1-1 第一章第一节微信小程序的基本知识1 文章目录前言一.注册一个小程序账号二.第一个微信小程序"Hello Wechat!" (一)准备工作 (二)页面介绍 (三)代 ...
微信小程序的脚本就是c语言,新手尝试编写微信小程序（2）——我的第一个微信小程序...
前面,我们大体上了解了微信小程序的框架,已经简单的页面元素显示方法及变量和自定义函数的调用.这里我们继续来探索隐藏在微信默认新建的小程序中的秘密.这篇博文,我们来进一步了解一下第一个小程序中的几个典型 ...
3年5000家，苏宁小店如何立足“中国第一O2O社区小店”？
进入2018年,整个零售业步入到深度整合之年,开春以来,各家巨头纷纷出场布局.3月21日,成都春糖会期间,苏宁易购大快消战略布局发布会召开,这是苏宁易购大快消事业群首次以集体的形象对外亮相.作为掌舵人 ...
新手创建第一个微信小程序教程
在本地已有小程序开发环境的基础上,新手如何使用开发者工具.以及开发第一个微信小程序具体步骤和实施方法.本篇开发教程将详解新手入门时开发第一个微信小程序具体实施过程. 在安装完"微信Web开发 ...
编写第一个微信小程序界面
编写第一个微信小程序界面不忘初心,方得始终:初心易得,始终难守. 传统的 web 结构小程序文件目录结构小程序页面层级结构编写第一个小程序 1. 创建小程序目录结构 2. 编写代码 welco ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
爬去微信小程序服务器代码,Python爬取微信小程序通用方法代码实例详解
背景介绍最近遇到一个需求,大致就是要获取某个小程序上的数据.心想小程序本质上就是移动端加壳的浏览器,所以想到用Python去获取数据.在网上学习了一下如何实现后,记录一下我的实现过程以及所踩过的小坑 ...
微信小程序开发笔记（二）第一个微信小程序
参考教材:<微信小程序开发入门与实践> 雷磊前置知识:JavaScript,CSS 新建项目安装好微信开发者工具后,我们就可以开始新建我们第一个微信小程序了. 选择新建项目,填入一个项 ...
mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...

新手尝试编写微信小程序（1）——我的第一个微信小程序

新手尝试编写微信小程序（1）——我的第一个微信小程序相关推荐

最新文章

热门文章