《微信小程序:开发入门及案例详解》—— 1.3 第一个小程序

1.3 第一个小程序

完成开发准备后我们便可以开始编写小程序,微信小程序的开发十分简单,大家可以快速上手。下面我们利用官方提供的dmeo让大家对小程序开发有初步认识。
1)打开微信开发者工具。第一次启动需要扫描二维码登录,如图1-9所示,开发权限配置参照上一小节。

2)登录后选择“添加项目”。
3)在填写项目信息之前,先创建一个空目录作为项目资源目录,这里我们以E:\weixin\demo为例。
4)填写项目信息。如果没有AppID可以选择“无AppID”;填写项目名称,项目名称在微信开发者工具中是唯一的;项目目录选择刚才创建的空目录,这里一定要保证刚才创建的目录为空目录,这样下面会出现“在当前目录中创建quick start项目”选项,勾选这个选项,如图1-10所示,然后点击“添加项目”按钮。

创建好后的界面如图1-11所示。

这样我们便成功创建了第一个小程序,这个demo是官方提供的示例,第一个页面展示了当前登录的用户信息,点击头像会跳转到一个记录当前小程序启动时间的日志页面。为了让大家进一步体验小程序开发,我们利用Sublime或其他编辑工具打开E:\weixin\demo文件夹,修改index.wxml,将“{{motto}}”替换为“我的第一个小程序”,index.wxml修改后代码如下:

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size= "cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <!--  修改这句代码  -->
    <text class="user-motto">我的第一个小程序</text>
  </view>
</view>

修改后点击“重启”,如图1-12所示。

重启后,登录界面提示语由原来的“Hello World”变成了“我的第一个小程序”,如图1-13所示。

填写了AppID的项目可以选择“项目→预览”(如图1-14所示),扫描二维码在微信中体验项目。

至此我们简单体验了一个小程序的创建过程,但对于一个喜欢“刨根问底”的学习者来说,这个案例远远不够,可能会有很多问题,例如:
小程序启动入口在哪里?
index.wxmlindex.wxss、index.js等文件是否可以重新命名?它们之间的关系是什么?目录结构有怎样的规范?
WXML、WXSS文件是什么?怎么感觉很像HTML和CSS?
小程序开发中有哪些限制?
大家可以先按自己理解尝试修改项目中相关的文件,看看能产生什么效果,把过程中遇到的问题记录下来,带着问题阅读后面的章节。

时间: 2024-10-26 19:39:28

《微信小程序:开发入门及案例详解》—— 1.3 第一个小程序的相关文章

《微信小程序:开发入门及案例详解》—— 第2章 小程序开发核心 2.1 简介

第2章 小程序开发核心 上一章讲解了小程序创建流程,本章主要为大家讲解小程序框架及核心内容.小程序框架可让开发者在微信中用尽可能简单.高效的方式开发出具有原生App体验的服务,这套框架控制着小程序完整的生命周期,负责页面的加载.渲染.销毁等工作,它是小程序的核心,学习小程序前,我们一定要对这套框架有深入的了解.本章主要对小程序目录结构.文件类型进行详细分析,重点介绍小程序视图层WXML.MXSS,逻辑层JS,这些是小程序开发的核心内容.本章个别小节内容比较深,学习过程中不必过于深究,能对框架有个

《微信小程序:开发入门及案例详解》—— 导读

前 言      自2016年9月21日微信小程序公布以来,微信技术群中关于小程序的讨论就没间断过,这是又一次创业的好机会,尤其是对中小企业扩大网络影响力很有利.我们在抓紧时间学习小程序的过程中,总结并实践了小程序的功能,并希望通过这本书传达给广大的读者.我们在编写过程中正临电商行业中最忙的几个月,双11.双12.圣诞节.元旦节等需求已经堆叠如山,我和边思白天处理公司需求,晚上编写书籍,几乎没有周末,这样坚持了几个月终于完成本书,直至交稿时才如释重负.      小程序刚发布不久,很多功能都还在

《微信小程序:开发入门及案例详解》—— 2.4 框架页面文件

2.4 框架页面文件 小程序中一个框架页面包含4个文件,同一框架页面的这4个文件必须具有相同的路径与文件名,进入小程序时或页面跳转时,小程序会根据app.json配置的路径找到对应的资源进行渲染. ◇ .js文件:页面逻辑文件,必要项. ◇ .wxml文件:页面结构文件,必要项. ◇ .wxss文件:页面样式文件. ◇ .json文件:页面配置文件. 与框架主体文件相比框架页面文件多了一种页面结构文件,其余3个文件和框架主体文件的功能类同,下面我们一一讲解每个文件作用. 2.4.1 页面配置文件

《微信小程序:开发入门及案例详解》—— 1.2 接入流程

1.2 接入流程 小程序与订阅号.服务号.企业号是并行的体系,具有独立的注册.发布流程.开发小程序首先前需要在微信公众平台上注册小程序,完善基本信息,然后下载开发者工具进行编码,最后通过开发者工具提交代码,官方审核通过后便可发布.要注意的是,现阶段每个机构账号只允许注册最多50个小程序,每个小程序一年需要缴纳300元,所有小程序都需要绑定一个电子邮箱,一个手机号码最多只能绑定5个小程序. 1.2.1 注册小程序帐号 注册小程序帐号只需如下四步: 1)在微信公众平台官网首页,点击右上角的"立即注册

《微信小程序:开发入门及案例详解》—— 2.2 “徒手”创建小程序

2.2 "徒手"创建小程序 为了让开发者更好地理解小程序框架运行机制,接下来将带领大家"徒手"创建一个结构最简单的小程序,这样每个细节都是开发者自己完成的,这对理解小程序框架有很大帮助.步骤如下: 1)创建项目目录,这里以E:\weixin\myproject为例. 2)按图2-2所示的目录结构创建文件: 3)打开app.json,写入以下代码: { "pages" : [ / 指定默认启动页面地址 / "mypages/index/i

《微信小程序:开发入门及案例详解》—— 1.4 小结

1.4 小结      本章简单介绍了小程序开发流程,让大家对小程序有体验式理解.小程序的学习过程并不难,掌握框架.组件.API后可快速上手,技术细节问题我们将在后续章节中进行详细讲解,本章仅介绍了主要的流程.

《微信小程序:开发入门及案例详解》—— 2.6 小结

2.6 小结      小程序框架是小程序开发的核心,本章重点讲解了框架的大致原理.规范,剖析了所涉及的每个文件,小程序这种基于数据的编码方式和前端基于DOM的编码方式有很大不同,大家要着重了解熟悉,了解小程序运行原理后,后续学习组件和API将会非常简单.

微信公众平台开发入门教程(图文详解)_Android

在这篇入门教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯及XML语言基础.如果你还没有,那么请先学习相关知识. 我们将使用微信公众账号方倍工作室(账号:pondbaystudio,二维码在最底部)作为讲解的例子. 这篇入门教程将引导你完成如下任务: 创建百度云平台应用启用微信公众平台开发模式获取订阅.文字.图片.语音.视频消息回复文本.图文及音乐消息程序开发  创建百度云应用 申请账号 登录http://developer.baidu.com/bae ,使用邮箱或者手

微信公众平台开发入门教程(图文详解)

在这篇入门教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯及XML语言基础.如果你还没有,那么请先学习相关知识. 我们将使用微信公众账号方倍工作室(账号:pondbaystudio,二维码在最底部)作为讲解的例子. 这篇入门教程将引导你完成如下任务: 创建百度云平台应用启用微信公众平台开发模式获取订阅.文字.图片.语音.视频消息回复文本.图文及音乐消息程序开发 创建百度云应用 申请账号 登录http://developer.baidu.com/bae ,使用邮箱或者手机