1.mac版微信开发者工具不显示二维码：必须用wifi,网线链接就不可以。
2.page文件夹下放页面文件夹，每个页面文件夹下有自己的js,json,wxml,wxss文件
每个项目中有app.js, app.json, app.wxss文件，进行全局配置（一些共有的）
一个既在全局中配置，又在页面中配置的样式（json也是），采取就近原则（一般都是页面较近）
最多只能有5级页面
3.告诉小程序要启动哪个页面：框架——配置——pages
app.json中：
{
"pages": [
"pages/welcome/welcome",
"pages/post/post"
]
}
放在最上面的代表首页
不用具体写文件的扩展名，只用把每个文件的名字都写成一样的（welcome,post）
json中不能加注释
4.标签
<view>类似于<div>，只是容器，没有功能性
<image>类似于<img>，默认宽300px，高225px
<text> 文本，如果不加此标签，手机端将无法长按选中（无法复制）
可以嵌套：<text><text style="clolr:red">hello</text>高瘦奕</text>
hello的颜色是红色
转义字符：<text >hello\n高瘦奕</text> \n 会自动换行
<button>不好控制，最好用<view>包裹<text>
5.样式
静态样式：多用class写在wxss文件中
动态样式：可以内嵌式写在标签中 <image style="width:200px;height:200px">
6.分辨率与rpx
pt：逻辑分辨率，与屏幕尺寸有关，理解为长度和视觉单位。
px：物理分辨率，与屏幕尺寸无关，点俄密友长度，只有个数。
1pt由1个px或2个px或3个px组成。
iphone6:1px=0.5pt=1rpx 视网膜屏幕：1:2 人眼最多能分辨1:2个，所以1:3并不会更清晰
iphone6 plus:1px=0.6rpx
rpx:会自动在不同的分辨率下进行转换
不是所有单位都适合用rpx
小程序设计师给的图片一般都是iphone6 的尺寸，宽750，而模拟器中是375px,所以要用rpx
7.弹性盒子模型
父盒子：display:flex flex-direction:colmun/row 小程序中应用广泛
8.导航栏
框架——配置——window
"window": {
"navigationBarBackgroundColor":"#b3d4db"
}
navigationBarBackgroundColor：导航栏背景颜色，如"#000000"
navigationBarTextStyle：导航栏标题颜色，默认white
navigationBarTitleText：导航栏标题文字内容
backgroundColor：窗口的背景色
9.轮播图
组件——视图容器——swiper
<swiper>包裹着<swiper-item>，<swiper-item>中放image或者 text都可以，都会轮播起来
<swiper-item>继承<swiper>的宽高，所以只给<swiper>设置宽高就可以，<image>一定要设置宽高
indicator-dots：是否显示面板指示点
indicator-color：指示点颜色
indicator-active-color：当前选中的指示点颜色
autoplay：是否自动切换
current：当前所在滑块的 index
interval：自动切换时间间隔
vertical：滑动方向是否为纵向
注意：vertical=“{{false}}” 才代表false，因为字符串都会转成true，如果vertical=“false”仍然是true
<swiper indicator-dots='true' autoplay='true' vertical='{{false}}'>
<swiper-item>
<image src="/images/1.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/2.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/3.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/4.jpg"></image>
</swiper-item>
</swiper>
swiper{
height: 500rpx;
width: 100%;
}
swiper image{
height: 500rpx;
width: 100%;
}
10.第二个页面中导航栏颜色需要变换
post.json 去掉window
{
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "文与字"
}
11.脚本文件js page函数
Page({
/**
* 页面的初始数据
*/
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
},
onUnload: function () {
},
onPullDownRefresh: function () {
},
onReachBottom: function () {
},
/* 用户点击右上角分享 */
onShareAppMessage: function () {
}
})
onLoad——onShow——onReady
onHide:页面隐藏，可以返回这个页面
onUnload:关闭页面
自定义函数：
tap:function(){
},
数据绑定：小程序中没有dom，不需要事件绑定
(1)
data: {
url: "/images/1.jpg",
date: "Apr 2 2018",
photo: "/images/1.jpeg"
},
在wxml中，把要替换的用 {{url}}包裹，若是标签中的属性，必须加“”
(2)
onLoad: function (options) {
var post_content1=[
{
url:"/images/1.jpg",
date:"Apr 2 2018",
photo: "/images/1.jpeg",
text:"啦啦啦"
}
]
this.setData({post_content1});
},
this.setData({post_content1}); 这句话相当于把数据放入data
data: {
url:"/images/1.jpg",
date:"Apr 2 2018",
photo: "/images/1.jpeg",
text:"啦啦啦"
}
(3)
onLoad: function (options) {
var post_content=[
{
img:{
url:"/images/1.jpg",
photo: "/images/1.jpeg"
}
date:"Apr 2 2018",
text:"啦啦啦"
}
绑定方式：<image src="{{img.url}}"
(4)
onLoad: function (options) {
var post_content=[
{
url:"/images/1.jpg",
date:"Apr 2 2018",
photo: "/images/1.jpeg",
text:"啦啦啦"
},
{
url: "/images/2.jpg",
date: "Apr 2 2018",
photo: "/images/1.jpeg",
text: "嘿嘿嘿"
}
]
this.setData({post_key:post_content});
}
需要循环获取
要用 block把循环的代码包裹起来
<block wx:for="{{post_key}}"> wx:for="item"可以省略不写
每个替换的变量前面加item <image src="{{item.photo}}"></image>
12.关联两个页面（事件）
框架——视图层——wxml——事件
每个事件前面都要加 bind或者catch
bind：不阻止冒泡
catch：阻止冒泡
冒泡：
<view class="moto" bindtap="tap">
<text bindtap="tap">点击开启小程序之旅</text>
</view>
点击text时，两个tap都会执行（点击子元素，父元素也会执行）
点击盒子（不覆盖文本）时，只会执行父元素的tap
在welcome.js中写tap函数
tap:function(){
wx.redirectTo({
url: '../post/post',
})
}
wx.redirectTo({url: '../post/post'}) 平行跳转，两个页面是兄弟关系，跳转后关闭前一个页面
wx.navigateTo({url: '../post/post'}) 父子跳转，跳转后隐藏前一个页面
这两个方法接收的都是对象
13.整个程序
app.json
{
"pages": [
"pages/welcome/welcome",
"pages/post/post"
],
"window": {
"navigationBarBackgroundColor":"#b3d4db"
}
}
welcome.wxml
<view class="container">
<image src="/images/1.jpeg" class="image"></image> 绝对路径：/开头；相对路径：还是之前的，若要跳出目录../
<text class="text">你好，高瘦奕</text>
<view class="moto" bindtap="tap">
<text>点击开启小程序之旅</text>
</view>
</view>
welcome.wxss
page{
background-color: #b3d4db; 给.container设置背景色并不能把整个页面的颜色改变，最下面由于没有内容撑开将有一段不显示颜色
height: 100%; 用heightt:100%也没用。必须在page中设置
}
.container{
display: flex;
flex-direction: column;
/* 这个只对文字有用，对图片还是得用 margin: 0 auto; */
text-align: center;
background-color: #b3d4db;
/* height: 100%; 这个只能根据盒子大小设置颜色，底下没有设置颜色*/
}
.image{
height: 200rpx;
width: 200rpx;
margin: 0 auto;
margin-top: 160px;
}
.text{
margin-top: 100px;
font-size: 32rpx;
font-family: MicroSoft Yahei;
font-weight: 700;
}
.moto{
border: 1px solid #405f80;
/* 没设置height和width之前是居中的，设置后就不居中了，必须margin: 0 auto; */
height: 50px;
width: 200px;
margin: 0 auto;
border-radius: 5px;
text-align: center;
margin-top: 100px;
}
.moto text{
font-size: 15px;
line-height: 50px;
color: #405f80;
}
welcome.js
Page({
tap:function(){
wx.redirectTo({
url: '../post/post',
})
},
})
js中没有内容也要写上page()函数，否则会报错
post.wxml
<view>
<swiper indicator-dots='true' autoplay='true' vertical='{{false}}'>
<swiper-item>
<image src="/images/1.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/2.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/3.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/4.jpg"></image>
</swiper-item>
</swiper>
<block wx:for="{{post_key}}">
<view class="post-container ">
<view class="post-title">
<image src="{{item.photo}}"></image>
<text>{{item.date}}</text>
</view>
<image class="post-image" src="{{item.url}}"></image>
<text class="post-content">
{{item.text}}
</text>
</view>
</block>
</view>
post.wxss
swiper{
height: 500rpx;
width: 100%;
}
swiper image{
height: 500rpx;
width: 100%;
}
.post-container{
display: flex;
flex-direction: column;
margin:20rpx 0 40rpx 0;
background-color: white;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
padding-bottom: 5px;
}
.post-title{
margin: 10rpx 0 20rpx 10rpx;
}
.post-title image{
width: 60rpx;
height: 60rpx;
/* 让图片竖直居中 */
vertical-align: middle;
}
.post-title text{
font-size: 26rpx;
/* 父盒子没设高度，所以不用line-height */
vertical-align: middle;
margin-left: 16rpx;
margin-bottom: 5rpx;
}
.post-image{
width: 100%;
height: 430rpx;
margin-left: 16px;
margin: 0 auto;
}
.post-content{
font-size: 28rpx;
color: #666;
margin-left: 20rpx;
line-height: 16px;
}
post.js
Page({
Date:{
// url: "/images/1.jpeg"
},
/**
* 页面的初始数据
*/
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var post_content=[
{
url:"/images/1.jpg",
date:"Apr 2 2018",
photo: "/images/1.jpeg",
text:"这风铃 跟心动很接近 这封信 还在怀念旅行 路过的 爱情都太年轻 你是我 想要 再回去 的风景 这别离 被瓶装成秘密 这雏菊 美的像诗句 而我在风中等你 的消息 等月光落雪地 等枫红染秋季 等相遇 我重温 午后 的阳光 将吉他 斜背 在肩上 跟多年前一样 我们轻轻的唱 去任何地方 我 看着你的脸 轻刷着和弦 情人节卡片 手写的永远 还记得 广场公园 一起表"
},
{
url: "/images/2.jpg",
date: "Apr 2 2018",
photo: "/images/1.jpeg",
text: "这风铃 跟心动很接近 这封信 还在怀念旅行 路过的 爱情都太年轻 你是我 想要 再回去 的风景 这别离 被瓶装成秘密 这雏菊 美的像诗句 而我在风中等你 的消息 等月光落雪地 等枫红染秋季 等相遇 我重温 午后 的阳光 将吉他 斜背 在肩上 跟多年前一样 我们轻轻的唱 去任何地方 我 看着你的脸 轻刷着和弦 情人节卡片 手写的永远 还记得 广场公园 一起表"
},
{
url: "/images/3.jpg",
date: "Apr 2 2018",
photo: "/images/1.jpeg",
text: "这风铃 跟心动很接近 这封信 还在怀念旅行 路过的 爱情都太年轻 你是我 想要 再回去 的风景 这别离 被瓶装成秘密 这雏菊 美的像诗句 而我在风中等你 的消息 等月光落雪地 等枫红染秋季 等相遇 我重温 午后 的阳光 将吉他 斜背 在肩上 跟多年前一样 我们轻轻的唱 去任何地方 我 看着你的脸 轻刷着和弦 情人节卡片 手写的永远 还记得 广场公园 一起表"
},
{
url: "/images/4.jpg",
date: "Apr 2 2018",
photo: "/images/1.jpeg",
text: "这风铃 跟心动很接近 这封信 还在怀念旅行 路过的 爱情都太年轻 你是我 想要 再回去 的风景 这别离 被瓶装成秘密 这雏菊 美的像诗句 而我在风中等你 的消息 等月光落雪地 等枫红染秋季 等相遇 我重温 午后 的阳光 将吉他 斜背 在肩上 跟多年前一样 我们轻轻的唱 去任何地方 我 看着你的脸 轻刷着和弦 情人节卡片 手写的永远 还记得 广场公园 一起表"
}
]
this.setData({post_key:post_content});
}
})
post.json
{
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "文与字"
}
扫一扫
1509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
