小程序开发文档

路径指南 developers.weixin.qq.com/miniprogram…

申请账户----微信公众平台 ---- 注册-----小程序

点击登录获取头像

代码

创建项目

• 所有内容删除

• 新建app.js文件加入{}

• 新建app.json文件

• 新建app.wxss文件

• 新建目录pages

• 在目录里新建index文件

• 在新建page 取名index文件

• 简单罗列

         <!-- view是窗口 -->
        <view>
        <!-- 图片是根路径开始出发/  -->
         <image src="/images/weixin.jpg"></image> 
         <text>Hello World</text>
         <button>点击获取昵称和头像</button>
        </view>
  

尺寸

• rpx 单位 无视机型的大小统一设定屏幕的大小整体75rpx
• rpx换算 iphone6rpx 375px(便于计算) 是1rpx 是0.5px

样式

• background-color：red;
• font-size:xxx;
• height:xxx;
• width:xxx;
• border:xxx;

内联样式

• style(可以将样式值当做变量应用)
• class

flex布局

     <view class="a">
      <view class="b">
        <view class="c">
    
        </view>
      </view>
    </view>
    <!-- 对于a，b而言 a市容器，b项目-->
    <!-- 对于b，c而言 b市容器，c项目  -->
    <!-- 水平布局 从左到右是主轴，从上到下是交叉轴 -->
    <!-- 垂直布局 从左到右是交叉轴，从上到下是主轴 -->

容器的属性

flex-direction用于设置坐标轴的方向，通过设置坐标轴可以规定项目的排列方向

• 引用display:flex;

• flex-direction

       row 默认值 水平布局 从左到右是主轴
       row-reverse 水平布局 从右到左是主轴，顺序会变，位置也从右向左开始
       column 垂直布局 主轴从上到下排列
       column-reverse 垂直布局反方向，从下到上排序
  

justify-content 设置项目在主轴方向的对齐方式以分配项目之间及其周围的多余空间

• 引用display:flex;

• justify-content

       flex-start 默认值 项目每行对其主轴的起点项目间不留空隙
       flex-end 默认值 项目每行对其主轴的终点项目间不留空隙
       center 剧中
       space-around 左右有间隙 中间等分
       space-between  均分无间隙