主机频道
这次给大家详细讲解一下微信小程序开发的介绍和使用。微信小程序开发的引入和使用有哪些注意事项？以下是实际案例。让我们来看看。
微信小程序已经火了一段时间，之前也一直在关注。就这半年的发展来看，大部分native app的公司还是不愿意把主营业务放在微信平台上，以免受制于腾讯。但是，小程序的应用场景(跑跑去和二维码分发等。)还是很值得学习的。如果你从技术上了解React，你会发现它们在组件化上有很多相似之处。说白了，小程序就是基于微信平台的H5轻应用。微信封装了系统的底层功能(设备、位置、媒体、文件等。)和自己的功能(登录、支付、分享等。)转换成相应的API供小程序调用。
我根据官方文档写了一个穹顶，借助大风天气开放的API接口实现了天气预报。只是为了学习和交流。谢谢~
一、小程序的基本概念
1.开发工具:为了配合小程序的开发，微信专门配备了自己的开发工具，选择相应的版本进行安装。
2.创建项目应用:安装完成后，打开扫码登录。小程序分发需要企业级认证微信官方账号，个人订阅号无法分发。所以我在这里选择no AppID，创建一个项目，选择一个本地空文件夹，并选中Create quick start project来生成一个演示。
3.写一个小程序:demo初始化，包含一些简单的代码文件，其中app.js、app.json、app.wxss必不可少。小程序将读取这些文件来初始化实例。
App.js是小程序的初始化脚本，可以在这个文件中监控小程序的生命周期，申请全局变量，调用API。
App.json是小程序的全局配置，pages设置页面路径构成(默认第一个是主页)，window设置默认页面的窗口性能。
App.wxss是整个小程序的公共样式表。类似于网站开发中的common.css
4.创建一个页面:在pages目录下，它由一个文件夹中的四个不同类型的同名文件组成。。js是一个脚本文件。json是一个配置文件。wxss是一个样式表文件，而。wxml是页面结构文件，其中不需要json和wxss文件(会继承app的json和wxss默认设置)。
二、小程序的框架
1.小程序的配置
App.json主要分为五个部分:pages:页面组，window:框架样式(状态栏、导航栏、标题、窗口背景色)，tabBar:底部菜单，networkTimeout:网络超时设置，debug:启动调试模式。
Page.json是为页面单独设置的，app.json的全局设置是堆叠的。
"页面& quot"页数/索引/索引& quot"页面/日志/日志& quot"窗口& quot"backgroundTextStyle & quot:& quot光& quot"navigationBarBackgroundColor & quot；:& quot# 000 & quot"navigationBarTitleText & quot:& quot微信& quot"navigationBarTextStyle & quot:& quot白色& quot
2.小程序的逻辑
用App()注册一个小程序，必须在app.js中注册，不能注册多个。
App({//下面是小程序onLaunch的生命周期:function() {}，// monitor初始化onShow: function() {}，// monitor display(进入前台)onHide: function() {}，//Listen hide(进入后台:按home离开微信)onError: function(msg) {}，//Listen error//下面是自定义的全局方法和全局变量global fun:fun(){ }，global data:& # 039；我是环球数据& # 039；})
用Page()注册一个页面，注册在每个页面的js文件中。
page({ data:{ text:& quot；这是页面数据。"}，//页面数据，用于维护视图，json格式onLoad: function(options) {}，//监听load onReady: function() {}，//监听完成第一次渲染onShow: function() {}，//监听show onHide: function() {}，//监听hide onUnload: function() {}，//监听卸载onpulldownresh:function(){ }，//监听下拉onReachBottom: function() {}，//监听上拉底onshareAppMessage: function () {}，//监听//设置自定义事件处理函数(在视图中绑定)的数据值ViewTap: function () {/setdata，以及视图this . setdata({ text:& # 039；为更新视图设置一些数据。'}}}}) 3.applet的视图被绑定到事件。
在每个页面的wxml文件中，对js页面中的数据执行数据绑定和自定义事件绑定。
& lt！--{{}}绑定data中的指定数据，并渲染到view -->:& lt；view class = & quot标题& quot& gt{ { text } } & lt/view & gt；& lt！--wx:用于获取循环渲染的数组数据，item为数组中每一项的-->:& lt；查看wx:for = & quot；{ { array } } & quot& gt{ { item } } & lt/view & gt；& lt！--wx:if条件渲染-->:& lt；view wx:if = & quot；{ { view = = & # 039WEBVIEW & # 039} } & quot& gtWEBVIEW & lt/view & gt；& ltview wx:elif = & quot；{ { view = = & # 039APP & # 039} } & quot& gtAPP & lt/view & gt；& ltview wx:else = & quot；{ { view = = & # 039米娜& # 039；} } & quot& gt米娜& lt/view & gt；& lt！--模板-->:& lt；模板名称= & quotstaffName & quot& gt& lt视图& gt名字:{ {名字}}，姓氏:{ {姓氏} } & lt/view & gt；& lt/template & gt；& lt模板是= & quotstaffName & quotdata = & quot{{...template.staffA } } & quot& gt& lt/template & gt；& lt模板是= & quotstaffName & quotdata = & quot{{...template.staffB } } & quot& gt& lt/template & gt；& lt！--bindtap指定tap事件处理函数为view tap -->:& lt；视图bindtap = & quotViewTap & quot& gt我命令我自己
在每个页面的wxss文件中，wxml中的结构被样式化，相当于css，扩展了rpx单元。其中app.wxss默认为全局样式，对所有页面都有效。
三、小程序实战-天气预报(使用大风天气API)
我们先来看看完成后的效果。总共有三页。测试演示不好看，不喜勿喷~
10 - 1
1.设置底部菜单和页面。
我们可以根据快速入门生成的演示进行修改。因为它涉及到图标，我们将创建一个新的图像文件夹来存储图片。
在原来的pages文件夹中，删除索引和日志页面文件夹，并创建三个新的页面文件夹:天气、城市和关于，以及对应于这三个页面的四种文件类型。文件结构如下
接下来，配置app.json文件
/*app.json，此文件不能包含任何评论，所以正式申请时应删除所有评论*/{ " pages & quot；:[//小程序的页面路径数组，第一个默认是首页，所有页面都需要写在这里，否则无法加载“pages/weather/weather & quot；，& quot页数/关于/关于& quot，& quot页面/城市/城市& quot]，& quot窗口& quot:{//applet框架设置" navigationBarBackgroundColor & quot；:& quot# 000 & quot，& quotnavigationBarTitleText & quot:& quot天气预报"，"navigationBarTextStyle & quot:& quot# fff & quot，& quot背景颜色& quot:& quot# 666 & quot，& quotbackgroundTextStyle & quot:& quot光& quot，& quotenablePullDownRefresh & quot:true }，& quottabBar & quot:{//菜单设置下方的小程序“颜色& quot:& quot# 666 & quot，& quot选定的颜色& quot:& quot# 56abe4 & quot，& quot背景颜色& quot:& quot# ddd & quot，& quot边框样式& quot:& quot黑色& quot，& quot列表& quot:[{ & quot；pagePath & quot:& quot页面/天气/天气& quot，& quoticonPath & quot:& quotimages/tabbar/weather 1 . png & quot；，& quot选择selectedIconPath & quot:& quotimages/tabbar/weather 2 . png & quot；，& quot文本& quot:& quot天气预报"，{ & quotpagePath & quot:& quot页面/城市/城市& quot，& quoticonPath & quot:& quotimages/tabbar/city 1 . png & quot；，& quot选择selectedIconPath & quot:& quotimages/tabbar/city 2 . png & quot；，& quot文本& quot:& quot设置城市" }，{ & quotpagePath & quot:& quot页数/关于/关于& quot，& quoticonPath & quot:& quotimages/tabbar/about 1 . png & quot；，& quot选择selectedIconPath & quot:& quotimages/tabbar/about 2 . png & quot；，& quot文本& quot:& quot关于我" }]，& quot位置& quot:& quot底部& quot}}2.注册小程序和整体风格。
修改app.js和app.wxss文件，如下所示
//app.jsApp({ //1，系统事件部分onLaunch: function () {//小程序初始化时执行var that = thisthat . curid = wx . getstoragesync(& # 039；curid & # 039)| | that.curid//API:获取本地缓存。如果不存在，将其设置为全局属性that . set local(& # 039；curid & # 039，that . curid)；//调用全局方法}，//2。自定义全局方法部分setlocal: function (id，val) {wx.setStorageSync (id，val)；//API:设置本地缓存}、//3、自定义全局属性部分curid:& quot；CN101010100 & quot，版本:& quot1.0 & quot})/**app.wxss**/。容器{ margin:0；填充:0；}.title { font -size:14px；font-weight:粗体；}3.页面的结构(wxml)、样式(wxss)、逻辑(js)和配置(json)
小程序中的Wxml摒弃html标签，使用视图(类似P)、文本(类似span)、图标等。类用HTML指定样式，bindtap绑定事件(类似onclick)。该页面没有特殊配置，json文件内容为空(不必要的文件)。
当前城市:{ { basic . city } } { { basic . update . loc } }/* * weather . wxss * */。城市{填充:3% 5%；背景:# ddd}.city text { font -size:16px；颜色:# 666；}.城市。更新{ font -size:12px；浮动:对；} app = getApp()；data:{cur_id:app.curid，basic:& quot；"，现在:& quot"}，on show:that = & # 039；加载& # 039；，图标:& # 039；加载& # 039；，duration:10000 })that . get now((d){ = & quot；http://files.heweather.com/cond_icon/"+d . now . cond . code+& quot；。png & quotget now:URL:& # 039；https://free -API . he weather . com/V5/now & # 039；'01a 7798 b 060 b 468 abdad 006 ea 3d e 4713 & # 039；'content -Type & # 039；: '应用程序/JSON & # 039；(RES){ fn(RES . data . he weather 5[0])；} bindViewTap:(){ wx . switch tab({ URL:& # 039；../city/city & # 039；}}}})相信你看完这个案例已经掌握了方法。更多精彩请关注即时码站其他相关文章！
推荐阅读:
如何在react中使用swiper方法
如何使用seajs编写需求合同
评论前必须登录！
注册