微信小程序学习_第一天

第一天学习

小程序目录结构

小程序文件结构和传统的web对比

html—wxml

css—wxss

javascript—javascript

小程序特有文件.json

传统web是三层结构,小程序是四层结构,多了一层配置.json

小程序的基本项目目录

%title插图%num

小程序配置文件

一个小程序应用程序会包括最基本的两种配置文件。

一种是全局配置文件 app.josn

另一种是页面自己的配置文件page.josn,例如上面图片中的index.json

注意:配置文件中不能出现注释

全局配置app.josn

app.json是当前小程序的全局配置,包括小程序的所有页面路径,页面表现、网络超时时间、底部tab等等。普通快速启动项目里边的app.josn配置如下:

 {
"pages":[
"pages/demo3/demo3",
"pages/demo1/demo1",
"pages/index/index",
"pages/img/img", 
"pages/mine/mine",
"pages/search/search",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#ccc",
"navigationBarTitleText": "我的应用",
"navigationBarTextStyle":"white",
"enablePullDownRefresh":true
}
}

字段含义:

  1. pages 字段:用于描述当前小程序的所有页面路径。
  2. window字段:定义小程序所有页面的顶部背景颜色,文字颜色定义等。

微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

tabbar

这部分主要是举例一个全局配置的案例,tabbar是配置项的一个案例,作用于下图

%title插图%num

代码如下:(这段代码放在上面那段代码下面,在上面代码结尾处加一个“,”即可)

 "tabBar": {
"list":[
{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"icon/_home.png",
"selectedIconPath":"icon/home.png"
},
{
"pagePath":"pages/img/img",
"text":"图片",
"iconPath":"icon/_img.png",
"selectedIconPath":"icon/img.png"
},
{
"pagePath":"pages/mine/mine",
"text":"我的",
"iconPath":"icon/_my.png",
"selectedIconPath":"icon/my.png"
},
{
"pagePath":"pages/search/search",
"text":"搜索",
"iconPath":"icon/_search.png",
"selectedIconPath":"icon/search.png"
}
],
"selectedColor":"#ff9400"
}

有关于更多全局配置,参照官方文档(上面)。

页面配置page.json

开发者可以独立定义每个页面中的一些属性,如顶部颜色、是否允许下拉刷新等等。

⻚⾯的配置只能设置app.json中部分window配置项的内容,⻚⾯中配置项会覆盖app.jsonwindow中相同的配置项。

页面配置官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

%title插图%num

sitemap配置

用于配置小程序能否被微信索引,类似于网站中的robots.txt,后续小程序上线时再深入学习。

模板语法

WXML是框架设计的一套标签语言。

数据绑定

普通写法

<!-- 1 字符串 -->
<view>{{msg}}</view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 布尔类型 -->
<view>是否是伪娘:{{isGirl}}</view>
<!-- 4 object类型 -->
<view>{{Person.name}}</view>
<view>{{Person.age}}</view>
<view>{{Person.height}}</view>
<view>{{Person.weight}}</view>
<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}">自定义属性</view>
<!-- 6 使用bool类型充当属性 checked -->
<view><checkbox checked="{{isChecked}}"></checkbox></view>
Page({
/**
* 页面的初始数据
*/
data: {
msg:"hello mina",
num:100000,
isGirl:false,
Person:{
name:"富婆",
age:60,
height:150,
weight:150
},
isChecked:false
})

%title插图%num

 

%title插图%num

运算

<!-- 7 运算 -->
<!-- 数字加减 -->
<view>{{1+1}}</view>
<!-- 字符串拼接 -->
<view>{{'1'+'1'}}</view>
<!-- 三元运算符 -->
<view>{{10%2===0?'偶数':'奇数'}}</view>

%title插图%num

列表渲染

wx:for

项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名

wx:key用来提高数组渲染的性能

 <!--
8 列表循环
(1)wx:for="{{数组或者对象}}" wx:for-item="循环项的名称" wx:for-index="循环箱的索引"
(2)wx:key="唯一的值" 用来提高列表渲染的性能
①wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性
②wx:key ="*this" 那就表示你的数组是一个普通的数组 *this表示的是 循环项
*this代表的必须是唯一的字符串和数组
[1,2,3,4,5]
(3)当出现 数组的嵌套循环的时候 尤其要注意,以下绑定的名称,不要重名
"wx:for-item="item" wx:for-index="index""
(4)默认情况下,我们不写
"wx:for-item="item" wx:for-index="index""
小程序也会把 循环项的名称和索引的名称item和index
只有一层循环的话 "wx:for-item="item" wx:for-index="index"" 可以省略
9 对象循环
(1)wx:for="{{对象}}" wx:for-item="对象的子" wx:for-index="对象的属性"
(2)循环对象的时候 最好吧 item和index的名称都修改下
-->
<!-- <view>
<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
索引:{{index}}
--
值:{{item.name}}
</view>
</view> -->
<view>
<view wx:for="{{list}}" wx:key="id">
索引:{{index}}
--
值:{{item.name}}
</view>
</view>
<view>
<block>对象循环</block>
<view wx:for="{{Person}}" wx:for-item="value" wx:for-index="key">
属性:{{key}}
---
值:{{value}}
</view>
</view>
<!-- 10 block
(1)占位符的标签
(2)写代码的时候,可以看到这标签的存在
(3)页面渲染 小程序会把他移除掉
-->

%title插图%num

 

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇