微信小程序开发学习01

微信小程序开发01

1、从0开发helloworld

从0开发hello,world,初始化一个项目,基本架构只留下pages文件夹和project.config.json。

现在我们着手写hello,world!

  1. 创建项目3个app基本文件: app.js/wxss/json
  2. 创建about文件夹
  3. 创建4个基本文件:about.js/wxml/wxss/json
  4. 往文件里面写东西

在完成上面基本文件的创建后,我们就要着手写代码了。json文件不能为空

首先,我们要对app.json进行操作:

{

  "pages": [

    "pages/about/about"   //指定访问路由

  ]

}

接下来,进行hello,world的编写:

about.wxml ——相当于html文件

<text class="info">hello,world!</text>

about.js

//创建一个page函数
page{

}

接下来保存编译,hello,world就出来了

然后,进行样式的修改:

找到about.wxss文件:

.info{
  /* text-align: center; */
  font-size: 30px;
  /* color: red; */
  font-weight: bold;
  /* padding: 30px auto; */
}

就可以定制自己的样式了。

2、进行导航栏的编辑

找到about,json文件:

我们查看微信小程序官网开发文档,https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html,发现我们只需要在自己的页面对*.json文件进行修改,就可以对导航栏进行编辑:

配置项

属性 类型 默认值 描述 最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如 #000000
navigationBarTextStyle string white 导航栏标题颜色,仅支持 black / white
navigationBarTitleText string 导航栏标题文字内容
navigationStyle string default 导航栏样式,仅支持以下值:default 默认样式custom 自定义导航栏,只保留右上角胶囊按钮 微信客户端 7.0.0
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle string dark 下拉 loading 的样式,仅支持 dark / light
backgroundColorTop string #ffffff 顶部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16
backgroundColorBottom string #ffffff 底部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16
enablePullDownRefresh boolean false 是否开启当前页面下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离,单位为px。详见 Page.onReachBottom
pageOrientation string portrait 屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化 2.4.0 (auto) / 2.5.0(landscape)
disableScroll boolean false 设置为 true 则页面整体不能上下滚动。只在页面配置中有效,无法在 app.json 中设置
disableSwipeBack boolean false 禁止页面右滑手势返回 微信客户端 7.0.0
usingComponents Object 页面自定义组件配置 1.6.3

页面配置中只能设置 app.jsonwindow 对应的配置项,以决定本页面的窗口表现,所以无需写 window 这个属性。

配置示例

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

在模拟器中就可以显示相应的样式了。

3、view、text、image组件初探

text常见组件元素:

hello,world!

image常见元素:

容器:

在html中容器是: div

在wxml里是: view

4、快速实现基本布局

about.wxml:

<view class="container">
  <image src="/images/a.jpg"></image>
  <text>电影周周看</text>
  <text>每周推荐一部电影</text>
  <text>我的微博:xxx.weibo.com</text>
</view>

about.wxss:

.container{
  background-color: #eee;
  height: 100vh;
  text-align: center;
}

text{
  display: block;
}

iamge,text{
  margin-bottom: 60px; 
}

就实现了我们要想实现的布局,但问题产生了,只要我们的图片变化,就会导致布局变化,旧的重新计算margin-bottom,这是非常不智能的。

注:

1.em

在做手机端的时候经常会用到的做字体的尺寸单位

说白了 em就相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5

但是当div进行嵌套的时候,em始终是按照当前div继承的字体大小来缩放,参照后面的例子。

2.rem

这里的r就是root的意思,意思是相对于根节点来进行缩放,当有嵌套关系的时候,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。

参照后面给的demo

3.vh

vh就是当前屏幕可见高度的1%,也就是说

height:100vh == height:100%;

但是有个好处是当元素没有内容时候,设置height:100%该元素不会被撑开,

但是设置height:100vh,该元素会被撑开屏幕高度一致。

4.vw

vw就是当前屏幕宽度的1%

补充一句,当设置width:100%,被设置元素的宽度是按照父元素的宽度来设置,

但是100vw是相对于屏幕可见宽度来设置的,所以会出现50vw 比50%大的情况

所以,我们要使用flex布局:

.container{
  background-color: #eee;
  height: 100vh;
  /* text-align: center; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

#img{
  height: 187.5rpx;
  width: 187.5rpx;
  border-radius: 100rpx;
}

5、添加页面

添加页面weekly:

同about页面,需要在pages下创建一个文件夹weekly,并创建4个基本要素文件,由于本实例和about实例用到了相同的css代码段,所以将其放在全局配置中:app.wxss

.container{
  background-color: #eee;
  height: 100vh;  //高度100%
  display: flex;  //采用flex布局
  flex-direction: column;   //方向采用垂直
  justify-content: space-around;  //相同间隔
  align-items: center; //居中
}

app.json全局配置文件:

{
  "pages": [
    "pages/about/about",
    "pages/weekly/weekly"
  ]
}

想要那个做主页,就把哪个连接放前面。

现在我们要完成一个简单的功能,在about页面上,给每周推荐加上navigator,实现页面间的跳转。

在about.wxml中:

<view class="container">
  <image src="/images/a.jpg" id="img"></image>
  <text>电影周周看</text>
  <view>
    <text></text> <navigator url="/pages/weekly/weekly" style='display: inline;' open-type="navigate" hover-class="nav-hover" class="nav-default">每周推荐</navigator><text>一部电影</text>
  </view>
  <text>我的微博:xxx.weibo.com</text>
</view>

在这里,主要讲解如下代码段:

  <view>
    <text></text> <navigator url="/pages/weekly/weekly" style='display: inline;' open-type="navigate" hover-class="nav-hover" class="nav-default">每周推荐</navigator><text>一部电影</text>
  </view>
.nav-default{
  color: blue;
}
.nav-hover{
  color: red;
}

由于text是块级元素,为了把它转为行内元素,所以使用样式display: inline并给他添加容器view,转为行内元素,

由于text只支持字符串文本,所以navigatior元素不能解析,所以将这一句话分成了3个片段,将需要选择跳转的元素进行圈定,如上面的本周推荐,就给他添加了navigator元素,用来支持它跳转另外的页面,在navigator中也有很多样式和方法,首先url是跳转的页面网址,open-type支持多种方式:

在这里,由于css的执行,在同一块里面,当css定义的属性有冲突的时候,后面个成功!

如果变为

.nav-hover{
  color: red;
}
.nav-default{
  color: blue;
}

就不会在点击的时候显示为红色,会一直是蓝色!

open-type 的合法值

示例代码

在开发者工具中预览效果

.navigator-hover {
  color:blue;
}
.other-navigator-hover {
  color:red;
}
<!-- sample.wxml -->
<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

默认是navigator,使用redirect没有返回按钮


Author: Juntech
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source Juntech !
评论
  TOC