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

【微信小程序】01 入门

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

 官方开发文档:

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

 

需要去微信公众平台注册开发账号:

mp.weixin.qq.com

 

然后APPID的位置在这里:

左侧菜单栏【开发】——【开发管理】
卡片栏目项【开发设置】中

 

 

微信小程序的目录结构

└─miniprogram-1
    │  app.js 小程序的逻辑
    │  app.json 当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
    │  app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
    │  project.config.json 项目配置文件,做一些个性化配置,例如界面颜色、编译配置等等
    │  sitemap.json 配置小程序及其页面是否允许被微信索引
    │
    ├─pages 里面包含一个个具体的页面
    │  ├─index
    │  │      index.js 页面逻辑
    │  │      index.json 页面配置
    │  │      index.wxml 页面结构
    │  │      index.wxss 页面样式
    │  │
    │  └─logs
    │          logs.js 页面逻辑
    │          logs.json 页面配置
    │          logs.wxml 页面结构
    │          logs.wxss 页面样式
    │
    └─utils
            util.js 存放公共方法或者公共变量

 

 

快速创建页面的办法

直接在page.json里面追加页面路径,工具会自动生成对应文件

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

 

View 标签属性

属性类型默认值必填说明最低版本
hover-class string none 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 1.0.0
hover-stop-propagation boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time number 50 按住后多久出现点击态,单位毫秒 1.0.0
hover-stay-time number 400 手指松开后点击态保留时间,单位毫秒 1.0.0

 

hover-class测试:

html

<view hover-class="boxHover">view样式测试</view>

css

.boxHover {
  background-color: red;
}

可以看到是作为一个class来识别的,在这个元素点击时触发样式效果

 

原始Hover的效果是扶上去触发

<view hover-class="boxHover" class="box">view样式测试</view>

css

.box:hover {
  background-color: blue;
}

 

hover-stop-propagation 测试

<view class="father" hover-class="a">
  这是父元素
  <view class="son" hover-class="b">这是子元素</view>
</view>

css

.father {
  width: 100px;
  height: 100px;
  background-color: gainsboro;
}
.a {
  background-color: red;
}
.son {
  width: 100px;
  height: 50px;
  background-color: pink;
}
.b {
   background-color: yellowgreen;
}

点击子元素会触发A和B两个一起的效果,为了不让父元素触发,就可以设置这个属性:

<view class="father" hover-class="a">
  这是父元素
  <view class="son" hover-class="b" hover-stop-propagation="true">这是子元素</view>
</view>

这样父节点事件不触发了

 

hover-start-time 测试
<view class="father" hover-class="a">
  这是父元素
  <view class="son" hover-class="b" hover-stop-propagation="true" hover-start-time="500">这是子元素</view>
</view>

设置延迟时间,毫秒值单位,在事件监听到,开始指定的毫秒值之后开始触发

默认值50

 

hover-stay-time 测试

这个是设置CSS样式效果的持续时间,默认400

<view class="father" hover-class="a">
  这是父元素
  <view class="son" hover-class="b" hover-stop-propagation="true" hover-start-time="500" hover-stay-time="3000">这是子元素</view>
</view>

 

Text 标签属性

属性类型默认值必填说明最低版本
selectable boolean false 文本是否可选 (已废弃) 1.1.0
user-select boolean false 文本是否可选,该属性会使文本节点显示为 inline-block 2.12.1
space string   显示连续空格 1.4.0
decode boolean false 是否解码 1.4.0

 

selectable 属性已经弃用了,这里设置了以下发现确实文本还是不能选中

<view>
  <text selectable="true">这是一段演示文本</text>
</view>

改用下面这个User-Select

<view>
  <text user-select="true">这是一段演示文本</text>
  <text user-select="true">这是一段演示文本</text>
  <text user-select="true">这是一段演示文本</text>
</view>

 

space意思是是否显示连续空格,值有几种类型:

一般文档解析是不会展示连续的空格

说明最低版本
ensp 中文字符空格一半大小  
emsp 中文字符空格大小  
nbsp 根据字体设置的空格大小
<view>
  <text user-select="true" space="emsp">这是一段 演 示 文 本</text>
</view>

 

decode 解码,对特殊字符是否转义的处理

<view>
  <text>这是一段&nbsp; &lt;演示文本</text>
</view>

<view>
  <text decode>这是一段&nbsp; &lt;演示文本</text>
</view>

 

 

Image 图标标签

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

基础用法:

<view>
 <!-- 使用 / 表示从项目根目录作为开始路径 -->
  <image src="/images/pig.jpg" /> 
<!-- 或者从本文件所在目录作为开始路径 --> <image src="./../../images/pig.jpg" /> </view>

 

Navigator 页面跳转 

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
属性类型默认值必填说明最低版本
target string self 在哪个目标上发生跳转,默认当前小程序 2.0.7
url string   当前小程序内的跳转链接 1.0.0
open-type string navigate 跳转方式 1.0.0
delta number 1 当 open-type 为 \'navigateBack\' 时有效,表示回退的层数 1.0.0
app-id string   target="miniProgram"时有效,要打开的小程序 appId 2.0.7
path string   target="miniProgram"时有效,打开的页面路径,如果为空则打开首页 2.0.7
extra-data object   target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch()App.onShow() 中获取到这份数据。详情 2.0.7
version string release target="miniProgram"时有效,要打开的小程序版本 2.0.7
short-link string   target="miniProgram"时有效,当传递该参数后,可以不传 app-id 和 path。链接可以通过【小程序菜单】->【复制链接】获取。 2.18.1
hover-class string navigator-hover 指定点击时的样式类,当hover-class="none"时,没有点击态效果 1.0.0
hover-stop-propagation boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time number 50 按住后多久出现点击态,单位毫秒 1.0.0
hover-stay-time number 600 手指松开后点击态保留时间,单位毫秒 1.0.0
bindsuccess string   target="miniProgram"时有效,跳转小程序成功 2.0.7
bindfail string   target="miniProgram"时有效,跳转小程序失败 2.0.7
bindcomplete string   target="miniProgram"时有效,跳转小程序完成 2.0.7

 

<view>
    <view>
      <navigator url="/pages/pageA/pageA">to PageA 1</navigator>
      <navigator url="./../pageA/pageA">to PageA 2</navigator>
      <navigator url="/pages/pageB/pageB">to PageB 1</navigator>
      <navigator url="./../pageB/pageB">to PageB 2</navigator>
    </view>
</view>

目录文件:

└─miniprogram-1
    │  app.js
    │  app.json
    │  app.wxss
    │  project.config.json
    │  sitemap.json
    │
    ├─images
    │      pig.jpg
    │
    ├─pages
    │  ├─index
    │  │      index.js
    │  │      index.json
    │  │      index.wxml
    │  │      index.wxss
    │  │
    │  ├─logs
    │  │      logs.js
    │  │      logs.json
    │  │      logs.wxml
    │  │      logs.wxss
    │  │
    │  ├─pageA
    │  │      pageA.js
    │  │      pageA.json
    │  │      pageA.wxml
    │  │      pageA.wxss
    │  │
    │  └─pageB
    │          pageB.js
    │          pageB.json
    │          pageB.wxml
    │          pageB.wxss
    │
    └─utils
            util.js

 路径是定位到页面的目录下面的同名内容,框架因该是做了些文件读取的处理

不允许访问外部网络资源:

<navigator url="https://www.baidu.com/">to Baidu</navigator>

 

跳转方式:

open-type string navigate 跳转方式

值种类:

open-type 的合法值

说明最低版本
navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能  
redirect 对应 wx.redirectTo 的功能  
switchTab 对应 wx.switchTab 的功能  
reLaunch 对应 wx.reLaunch 的功能 1.1.0
navigateBack 对应 wx.navigateBack 的功能 1.1.0
exit 退出小程序,target="miniProgram"时生效 2.1.0

 

默认是使用Navigator,详细见文档内容

 

滚动区域:

这是一个横向展示案例:

     <scroll-view scroll-x="true">
      <view class="out">
        <view class="box">1</view>
        <view class="box">2</view>
        <view class="box">3</view>
        <view class="box">4</view>
        <view class="box">5</view>
      </view>
     </scroll-view>

css:

.box {
  display: inline-block;
  width: 120px;
  height: 60px;
  background-color: red;
  text-align: center;
  line-height: 60px;
  margin: 10px;
  color: white;
  font-weight: bolder;
  flex : 0 0 100px;
}

.out {
  border: 1px solid yellow;
  display: flex;
  flex-wrap: nowrap;
}

包含在内部的元素需要撑破机型的X轴Y轴限制才可以实现

 

设置scroll-left初始滑动偏移量:

     <scroll-view scroll-x="true" scroll-left="120">
      <view class="out">
        <view class="box">1</view>
        <view class="box">2</view>
        <view class="box">3</view>
        <view class="box">4</view>
        <view class="box">5</view>
      </view>
     </scroll-view>

 

设置纵向滑动案例:

html

     <scroll-view scroll-y="true" scroll-left="120" class="out">
        <view class="box">1</view>
        <view class="box">2</view>
        <view class="box">3</view>
        <view class="box">4</view>
        <view class="box">5</view>
     </scroll-view>

css

.box {
  width: 120px;
  height: 60px;
  background-color: red;
  text-align: center;
  line-height: 60px;
  margin: 10px;
  color: white;
  font-weight: bolder;
}

.out {
  border: 1px solid yellow;
  height: 200px;
}

实际上发现,直接在滑动区域里面加元素就行了

 


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
小程序学习笔记发布时间:2022-07-18
下一篇:
微信小程序倒计时组件开发发布时间: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