1
事例功用详解
麻雀虽小，五脏俱全，本事例有
5
大功用：
-
身份证，手机号，银行卡号，身段目标等查询。
-
快递查询
-
气候查询
-
扫雷小游戏，摇色子
-
2.界面如下：
3.事例程序结构
4.调用登录：
首要页面代码
5.主页wxml
!--pages/index/index.wxml--
view class="index-body"
!-- 页面翻滚部分 --
swiper class="swipr-box" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true"
block wx:for="{{imgUrls}}" wx:key="{{list}}"
navigator url="{{item.openpath}}" hover-class="none" open-type="navigate"
swiper-item
image src="{{item.img}}" class="slide-image banner-img" /
/
swiper-item
/
navigator
/
block
/
swiper
!-- 页面服务部分 --
view class="server-box"
!--服务 --
view class="server-t"
view class="server-text fs26"海 洋 查 询 服 务/view
/
view
!--列表 --
view class="list-server"
!-- 循环 --
view class="listbox" wx:for="{{server}}" wx:key="img"
navigator url="{{item.openpath}}" hover-class="none" open-type="navigate"
view
image src="{{item.img}}" class="listimg" /
/
view
view class="fs28"
{{item.text}}
/
view
/
navigator
/
view
/
view
view class="clear"/view
/
view
!-- 页面待开发部分 --
view class="server-box inm"
!--服务 --
view class="server-t"
view class="server-text fs26"仍在开发中,暂未敞开☺.../view
/
view
!--列表 --
view class="list-server"
!-- 循环 --
view class="listbox" wx:for="{{unserver}}" wx:key="img"
view
image src="{{item.img}}" class="listimg" /
/
view
view class="fs28"
{{item.text}}
/
view
/
view
view class="clear"/view
/
view
/
view
/
view
6.气候页面wxml主文件
!--pages/weather/weather.wxml--
view class="bgc-w"
!-- 定位地址 --
import src="../../model/model.wxml" /
template is="areaData" data="{{...item}}" /
view class="wt-box"
view class="fs28 fcff wt-d" bindtap="translate"{{my}}/view
image src="../../images/wz.png" class="wz-img" /
/
view
!-- 页面显现气候部分 --
view class="wt-text"
view class="fcff"
{{liveweather.tmp}}℃
/
view
/
view
view class="mainbox"
image src="../../images/svg/{{liveweather.cond_code}}.svg" class="mainimg" /
/
view
view class="wt-text"
view class="fcff"
{{liveweather.cond_txt}}
/
view
/
view
!-- 详细信息 --
view class="detbox"
!-- 五条数据 --
view class="detlist"
view class="fcff fs28 det-tt"体感湿度/view
view
image src="../../images/sd.png" class="detimg" /
/
view
view class="fcff fs28"{{liveweather.hum}}/view
/
view
!-- 五条数据 --
view class="detlist"
view class="fcff fs28 det-tt"降水量/view
view
image src="../../images/jstj.png" class="detimg" /
/
view
view class="fcff fs28"{{liveweather.pcpn}}/view
/
view
!-- 五条数据 --
view class="detlist"
view class="fcff fs28 det-tt"风向/view
view
image src="../../images/fx.png" class="detimg" /
/
view
view class="fcff fs28"{{liveweather.wind_dir}}/view
/
view
!-- 五条数据 --
view class="detlist"
view class="fcff fs28 det-tt"风力/view
view
image src="../../images/fl.png" class="detimg" /
/
view
view class="fcff fs28"{{liveweather.wind_sc}}/view
/
view
!-- 五条数据 --
view class="detlist"
view class="fcff fs28 det-tt"风速/view
view
image src="../../images/fs.png" class="detimg" /
/
view
view class="fcff fs28"{{liveweather.wind_spd}}/view
/
view
view class="clear"/view
/
view
!-- 未来三气候候 --
view class="threebox"
!-- 三天 --
view class="threelist fcff fs30"
view class="leftbox"今日 {{three[0].date}}/view
view class="centerbox"
view class="dp-ib threeimgbox"
image src="../../images/svg/{{three[0].cond_code_d}}.svg" class="detimg threeimg" /
view class="dp-ib threetext"
{{three[0].cond_txt_d}}
/
view
/
view
/
view
view class="rightbox"{{three[0].tmp_min}}℃ ~ {{three[0].tmp_max}}℃/view
/
view
!-- 三天 --
view class="threelist fcff fs30"
view class="leftbox"明日 {{three[1].date}}/view
view class="centerbox"
view class="dp-ib threeimgbox"
image src="../../images/svg/{{three[1].cond_code_d}}.svg" class="detimg threeimg" /
view class="dp-ib threetext"
{{three[1].cond_txt_d}}
/
view
/
view
/
view
view class="rightbox"{{three[1].tmp_min}}℃ ~ {{three[1].tmp_max}}℃/view
/
view
!-- 三天 --
view class="threelist fcff fs30"
view class="leftbox"后天 {{three[2].date}}/view
view class="centerbox"
view class="dp-ib threeimgbox"
image src="../../images/svg/{{three[2].cond_code_d}}.svg" class="detimg threeimg" /
v
