【练习】第一个微信小程序

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 会自动换行

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-item>

</swiper-item>

<swiper-item>

</swiper-item>

<swiper-item>

</swiper-item>

<swiper-item>

</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：阻止冒泡

冒泡：

<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

<image src="/images/1.jpeg" class="image"></image> 绝对路径：/开头；相对路径：还是之前的，若要跳出目录../

<text>点击开启小程序之旅</text>

</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-item>

</swiper-item>

<swiper-item>

</swiper-item>

<swiper-item>

</swiper-item>

<swiper-item>

</swiper-item>

</swiper>

</view>

</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": "文与字"

}

【练习】第一个微信小程序相关推荐

微信小程序开发与应用第一章微信小程序的基本知识1
1-1 第一章第一节微信小程序的基本知识1 文章目录前言一.注册一个小程序账号二.第一个微信小程序"Hello Wechat!" (一)准备工作 (二)页面介绍 (三)代 ...
微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序
第一天,认识微信小程序,第一个微信小程序 1.什么是微信小程序? 是h5网页嘛?不是微信张小龙说: 小程序是一种不需要下载安装即可使用的应用, 它实现了应用"触手可及"的梦想,用 ...
多平台多渠道账号体系绑定第一篇-微信小程序篇
先奉上本篇实现效果多平台多渠道账号体系绑定第一篇-微信小程序篇近来,在对接三方平台时,欲将多方开放平台统一整合入笔者的框架内. 如下为大致思路设计图由于需对接多方平台关联账号体系,思来之后,将设 ...
新手尝试编写微信小程序（1）——我的第一个微信小程序
微信小程序风靡全国已经好多年了,首先是微信小程序,后面百度等多个平台都发布了自己的小程序了,可我还从未尝试过开发一个玩玩,其实对于一个程序员而言,开发一个小程序实在不是什么难事情,所以今天就要聊此心愿 ...
《移动软件开发》实验1：第一个微信小程序实验报告
2022年夏季<移动软件开发>实验报告本实验报告所参考实验文档为:Docs (feishu.cn) 如想获得详细的制作过程,请点击上面链接.该博客仅为个人使用实验报告姓名和学号? / ...
微信小程序开发笔记（二）第一个微信小程序
参考教材:<微信小程序开发入门与实践> 雷磊前置知识:JavaScript,CSS 新建项目安装好微信开发者工具后,我们就可以开始新建我们第一个微信小程序了. 选择新建项目,填入一个项 ...
《移动软件开发》实验一：第一个微信小程序
2022年夏季<移动软件开发>实验一:第一个微信小程序一.实验目标 1.学习使用快速启动模板创建小程序的方法:2.学习不使用模板手动创建小程序的方法. 二.实验步骤 1.自动生成小程序 ...
普本在校生是如何零基础在一个月内开发出第一款微信小程序的
先自我介绍一下,我是一个普通本科的大三在读生,在2020年春节前后,自己一个人开发并上线了第一款微信小程序,后续陆续开发了N款小程序,并且自己通过毕设.课设的开发在2020年上半年的疫情期间挣了一万多 ...
启动第一个微信小程序（一）
参考源码:https://pan.baidu.com/s/17y6r44hrocXVjnPBVgJd5g 提取码:fk83 接口档案:https://www.showdoc.cc/1287197394 ...
编写第一个微信小程序界面
编写第一个微信小程序界面不忘初心,方得始终:初心易得,始终难守. 传统的 web 结构小程序文件目录结构小程序页面层级结构编写第一个小程序 1. 创建小程序目录结构 2. 编写代码 welco ...

【练习】第一个微信小程序

【练习】第一个微信小程序相关推荐

最新文章

热门文章