微信小程序开发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文件进行修改，就可以对导航栏进行编辑：

配置项

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

配置示例

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

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

3、view、text、image组件初探

text常见组件元素：

<text class="info" id="jay" style="" bindtap="f0" hiddeon="" data-user-name="user" >hello,world!</text>

image常见元素：

<image src="/images/a.jpg"></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没有返回按钮

获取更多内容

获取更多内容请访问： https://juntech.top/