微信小程序——第一堂课

按照老师所给的网址,把微信Web开发者工具下载并安装成功,紧接着根据步骤虽然没有自己编写代码,工具还是自动把第一个程序也调试成功了。

一个项目中有.json 、.wxml 、.wxss 、.js这四种类型的文件。

1、app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 。

      pages——页面途径

      window——背景颜色

2、WXML模板描述页面的结构。(跟H5有些相似,但有些标签还是不一样)

3、WXSS描述页面的样子,适时更改显示在设备上的宽度与像素比。

4、JS交互逻辑。

新学到的程序语句:

  view 视图容器

<view class="section">
  <view class="section__title">flex-direction: 排</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: 列</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

调试结果如下:

跟预想的不一样,颜色和格式不知道为什么都不显示

感想:

第一次用微信web开发工具,还真是有点不太会用。刚开始打开这个工具的时候还在想它怎么自己就蹦出来页面了呢,紧接着又不知道在哪里编辑代码,好不容易编辑了还没有得到预想的效果。所以今天新学的程序语句就只有一个,实际上感觉它与div很像。










猜你喜欢

转载自blog.csdn.net/weixin_42671557/article/details/81016123