专业 靠谱 的软件研发伙伴

您的位置:首页 > 新闻动态 > 小程序快速体验(二)

发布日期:2020-03-26

小程序快速体验(二)


var vote_init_script = document.getElementById("vote_init_node");if(!vote_init_script){var _vote_init_script = document.createElement("script");_vote_init_script.id="vote_init_node";_vote_init_script.src="//sf1-ttcdn-tos.pstatp.com/obj/ttfe/site/pgc-fe-icon/mp_vote_file.js";document.getElementsByTagName("head")[0].appendChild(_vote_init_script);}

阅读过我之前的快速体验小程序之后,相比你现在已经有一个自己的小程序公众平台账号,并可以正常登陆了。同时你已经下载过微信Web开发工具了。

现在,我们打开开发工具(需要扫码登陆),选择本地小程序项目。

小程序开发

首次打开开发工具,需要新添加一个项目。

小程序开发

小程序开发

项目描述

添加项目时,需要注意几点。

APPID,在公众平台-->设置-->开发者设置可以找到开发者ID

项目目录,需要提前新建一个文件夹作为项目的根目录,如图:\小程序目录

在当前目录中创建quick start项目前面的复选框可以打上勾,这样在你新建项目的时候,会自动初始化生成一些基本文件。

小程序开发

让我们简单看一下,小程序示例的目录结构

小程序开发

首先,最外层是pages和utils两个文件夹,以及三个名称都为app,后缀名不同的文件。这三个app文件是用来描述小程序项目的整体结构的,必须放在项目的根目录下。

app.js,用来描述小程序的全局逻辑

app.json,用来配置小程序的全局变量

app.wxss,用来设置小程序的全局样式

其中1和2是必须进行配置的,不可或缺。pages和utils目录,从名字即可得知,pages是用来描述所有的页面信息的,utils则是一个工具组件包。

每一个小程序页面,都是由四个文件名相同,后缀名不同的文件组成,不同的后缀名文件功能如下:

js,脚本文件,用来处理页面逻辑,熟悉javascript的都很明白吧

wxml,微信方定义的页面渲染文件,你可以理解成JSP页面

wxss,微信方定义的样式文件,同理可以理解为CSS文件

json,配置文件,一些相关参数配置

以上就是小程序项目的框架整体结构,只要理解了每个文件是做什么用的,基本就前进一大半了。

点击IDE界面左边栏的调试菜单,可以看到显示当前用户(也就是你自己)的微信头像以及昵称,点击头像,会跳转到一个启动日志的界面。具体的源代码对应/pages/index/,/pages/logs/。

小程序的一大特点,就是可以通过API的方式调用微信的一些功能,比如授权微信登陆、调用获取用户的基本信息等。片段代码如下:

//调用应用实例的方法获取全局数据

app.getUserInfo(function(userInfo){

//更新数据

that.setData({

userInfo:userInfo

})

})

只要你有一点CSS和JS以及任意一个后端开发语言的基础的话,学习小程序还是很轻松的。

你喜欢小程序吗 (单选) 0人 0% 喜欢,已经有成品了 0人 0% 喜欢,正在学习 0人 0% 不喜欢企鹅 投票

我们是正规实体技术开发公司,拥有专业的小程序解决方案,价格实惠,专业可靠。我们以客户需求为导向,定制商业微信小程序。以下是我们技术经理微信,可以添加进行咨询:


推荐阅读: