微信小程序开发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.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 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没有返回按钮

更多详情

更多详情请访问： juntech