• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序相关(一)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

小程序结构

渲染层:WXML + WXSS(类似于HTML CSS)
逻辑层:JavaScript
配置:JSON

 


======最基本的文件结构======
pages->
  test->
    test.js
    test.wxml
    test.wxss
    test.json
app.json
app.js
app.wxss
project.config.json


==========配置导航===============
在pages下的json文件里配置,根据开发文档来配置


=======元素===========
<text></text> 类似span标签
<image></image> 类似img 绝对路径:"/images/01.png"
<view></view> 类似div


=====响应式长度单位rpx========
让元素适配不同的屏幕宽度
无论哪种设备,都规定屏幕宽度为750rpx

 

========导航组件navigator==========
类似a标签
属性
url 用来跳转page url="/pages/weekly/weekly"
open-type 跳转后能否返回
redirect 不能返回
navigate 能返回
switchTab 有tabBar时使用,可以跳转对应页,tab也有相应的反馈(变色)
hover-class 按住时显示的样式,后面直接加class名称,样式必须在正常样式之后定义,否则失效

 

=======tabBar=============
选项卡
在app.json里

"list": [
{

"pagePath": "pages/about/about",

"text": "关于",
//显示的文字
"iconPath": "images/icons/home1.png",
//未选中时的iconfont
"selectedIconPath": "images/icons/home2.png"
//选中时的iconfont
},
{

"pagePath": "pages/weekly/weekly",

"text": "每周推荐",

"iconPath": "images/icons/neirong1.png",
"selectedIconPath": "images/icons/neirong2.png"

}
],

"color":"#000",
//平时字体的颜色
"selectedColor":"#00f"
//选中时字体的颜色
},

  

=====选项卡统一导航样式=======
在app.json里

"window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black"
}

  

======数据绑定==========
与vue类似,在对应的js的data里赋值,然后{{msg}}调用
也可以用表达式{{(score>=60?"及格":"不及格")}}


=====小程序运行环境与基本架构====
运行环境(宿主环境) 可以调用本机的一些接口
视图层(渲染层)和逻辑层
各自描述语言
各自的运行进程
(about页和weekly页,都内置了一个webviewId的内部状态变量,来记录他们各自是在记好webiew进程之中进行渲染)
两者基于数据绑定和事件机制的通讯(逻辑层对数据进行处理后,发送给视图层,视图层根据发送的内容对对应的部分渲染


=======wx:if===========
类似v-show,当为true的时候显示
<text wx:if="{{list.isHighlyRecommended}}">强烈推荐</text>


=======wx:for==========
类似v-for,但是他用的是item,下标是index

<view class="list clearfix" wx:for="{{list}}">

  <image class="list-image" src="{{item.imagePath}}"></image>

  <view class="list-details">

    <text>第{{index+1}}周:{{item.name}}</text>

    <text>{{item.comment}}</text>

</view>

</view>

  

 

========swiper轮播===========
默认高度是150rpx
swiper-item里能放各种内容
indicator-dots 显示控制点
--前一页与后一页都露出一点--
previous-margin="50rpx"
next-margin="50rpx"

<swiper style="background:#eee" indicator-dots='{{true}}'>

    <swiper-item>123</swiper-item>

    <swiper-item>456</swiper-item>

    <swiper-item>789</swiper-item>

</swiper>

  


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序模板消息点击后弹开发版过期发布时间:2022-07-18
下一篇:
VantWeapp小程序蹲坑之使用card组件显示价格发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap