1.小程序的开发与传统的web前端开发极其相似,想必各位技术宅们关心的是如何去开发一个小程序,这里我简单介绍一下如何简单上手开发小程序。
2.
第一步:安装3.首先下载微信开发者工具
4.https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201716
5.
6.
7.直接下载安装,点击下一步
8.
9.
10.然后扫码进入微信公众号,他会自动获取你的公众号和微信
11.
12.
13.
14.扫码登录后,选择本地小程序项目,点击添加项目,然后填写相关信息:
15.
16.
17.AppID:企业申请后获得,或受邀参与内测的可以去微信·公众平台里查看,只是测试用的话,选择无AppID.
18.依次填写项目名称和项目目录,在第一次创建项目时,建议勾选建立普通快速启用模板选项。这会帮助创建一个初始的demo。
第二步:基本配置19.进入创建的初始demo后,可以看到如下页面:
20.点击编辑后,可以发现右边目录结构中有两个文件夹以及根目录下的三个文件,三个文件分别为app.js、app.json、app.wxss,以下分别介绍这三个文件的作用:
21.app.js
22.
23.app.js为脚本文件,我们可以在app.js中监听并处理小程序的生命周期函数、声明全局变量以及调用各类提供的API。如初始demo中调用登录接口以及获取数据。
24.app.json
25.
26.该文件由两部分组成,我们可以在定义页面的路径,也可以在里面定义一些小程序的窗口背景色,配置导航条样式,配置默认标题。我们可以发现,这正好对应pages文件中的两个页面。如果我们要添加新的页面,也需要在这里先申明路径,“pages”数组中的一个页面为小程序的首页。
27.
28.注意:app.json中不能添加任何注释!!!
29.
30.
31.app.wxss
32.
33.app.wxss中定义小程序的公共样式,这里申明的样式我们可以在其他的页面中直接引用。
34.
第三步:页面创建35.前面介绍过这个初始demo中有两个页面,微信小程序中的每一个页面的【路径+页面名】都需要写在app.json的pages中。
36.每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。下面一次看一下每个文件的内容:
37.
38.
39.index.wxml为页面结构,相当于我们写的.html文件,index.wxml与.html还是存在一些区别。我们发现上述文件中的/view标签与.html中的/div标签很相似。其他view/、image/、text/标签的使用与.html中类似。
40.index.js
41.
42.
43.index.js是页面的脚本文件,与我们之前的.js文件的功能一样。在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。
44.index.wxss
45.
46.
47.index.wxss为页面的样式表,类似.css。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖app.wxss中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用app.wxss中指定的样式规则。
48.index.json
49.页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖app.json的window中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用app.json中的默认配置。
第四步:调试50.点击开发框左侧的调试进入调试界面:
51.
52.调试与chrom调试代码一样
53.
第五步:项目预览54.开发者工具上侧的“设置--项目设置”模块中包括:当前项目细节、上传以及项目的一些其他设置。
55.
56.由于没有AppID,部分功能无法使用。
57.
欢迎关注我的个人技术公众号!javascript艺术
微信小程序编程实例-一步一步开发微信小程序-微信小程序实例
浏览量:1932
时间:
来源:zj张静
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。
最新资讯
-

即速应用,赋能企业玩转微信小程序智慧经营
作为国内领军的智慧商业经营服务商,即速应用始终秉承“让每个企业都拥有自己的智慧店铺”的愿景,持续赋能更多企业玩转智慧经营。即速应用旗下拥有“小程序搭建工具-即速应用”、“私域流量专家-即客云”等产品,帮助商家打通互联网全生态营销闭环。 -

即客云2.0重磅更新,让微信小程序运营更简单!
即客云作为一款基于企业微信的第三方工具,现从多维度提供超过30种功能,自上线以来,已服务多家企业,受到一致好评。近期,我们根据客户反馈和市场调研正式推出升级版 即客云2.0!更新了私域运营SOP,群日历功能,批量拓客,客户雷达,消息推送,个人欢迎语,帮助企业更好运用企业微信;同时提升了社群运营工作标准化,提升运营效率,帮助企业实现客户增长,玩转私域流量。 -

零代码 + AI 双轮驱动|即速应用解锁人工智能小程序开发新范式
无需代码、无需 AI 算法功底,普通人也能快速搭建智能小程序。即速应用将人工智能与零代码开发深度融合,推出 AI 智能生成能力,用户通过自然语言描述需求,AI 自动生成小程序页面、功能模块与后台配置,覆盖商城、预约、同城、社区团购等全场景。平台内置 AI 智能推荐、智能客服、用户画像分析等能力,一键对接微信生态,打通视频号、企业微信、短信跳转,帮企业快速落地 AI 应用,抢占智慧经营先机,让每家企业都拥有 AI 驱动的智慧店铺。












