小程序基础

准备

一、申请小程序账号（AppID）

小程序简介：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AE%80%E4%BB%8B

1、打开微信公众平台，注册小程序账号。地址：https://mp.weixin.qq.com/

2、打开小程序后台设置，获取 AppID :https://mp.weixin.qq.com/wxamp/basicprofile/index?token=591929860&lang=zh_CN

 

二、下载并安装微信开发者工具

1、下载安装微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

2、打开后，扫码登陆

3、点击 + 号，按照具体需求添加项目

 

开发工具的UI简介

一、根据具体需求，用鼠标点击按钮，进行显示与隐藏

 

 

 

二、新建page时，会生成与之对应的四个文件，如：

xx.js
xx.json
xx.wxml
xx.wxss

 

 

三、在编辑器的输入状态下，按F1会显示全部的快捷键

 

 

 

四、在编辑完代码后，除了手动点击编译外，还可以 ctrl + s 自动编译。

 

小程序调试

一、在控制台调试

1、点击打开调试器即可看到。

 

二、断点调试

1、打开调试器后，转换到 Sources ，点击需要调试的页面，最好打开带有sm结尾的。

2、用鼠标点击左边的行号即可设置断点。

3、然后重新编译，即可。

4、鼠标移到某个变量上面，即显示实时数据。

5、最后按F10直接运行到最后，也可以点击如下按钮

 

 

 

编写页面

详解三种格式的文件

//一个页面一般用一个文件夹装起来，每个文件夹都有三种类型的文件
.js文件，用来做交互操作的
.wxml文件，相当于html文件，用来写结构层的
.wxss文件，相当于css文件，用来写表现层的

 

应用程序级别文件

 

 

 1、应用程序级别的文件是全局的，且只能有一个

 2、具有就近原则，如全局的 app.wxss 设置了文字为红色，页面的.wxss设置了文字为蓝色，那么最终显示效果为页面.wxss设置的为准。

 3、utils里面放着帮助类的文件

 4、project.config.json文件，记录开发者  使用  小程序工具时的配置选项，称为项目配置文件。

 5、小程序的目录结构自由，可不必按照推荐的目录结构来开发。

 

页面层级问题

页面层级最多不要超过5层。

小程序体积大的话可以适当使用分包加载。

 

编写准备

1、将种子页面的多数文件删除掉，留下一个pages文件夹，跟project.config.json文件

 

 

 

2、新建应用级别的文件，app.js、app.wxss、app.json 文件

3、在pages下，新建一个页面的目录，如welcome。

4、在welcome目录下，新建一个四件套，js、wxss、wsml、json

5、编写welcome.wxml文件

<view> <!-- view差不多相当于网页的div -->
    <text>Hello</text>
</view>

 

6、在app.json中写入页面

{
    "pages": [
        "pages/welcome/welcome"  /*数组第一项是小程序首页*/
          /*不用写页面的后缀。复制时这里的注释都要去掉*/
    ]  /*这里还可以创建页面，写一个不存在的页面，保存后，会自动新建出那个页面*/
}    

 

7、在welcome.json中，写入一对花括号，或删除welcome.json文件

{
  /*welcome.js不是必须的，复制时删除注释*/
}

 

8、在welcome.js中写入

Page({

})

 

9、若要拷贝项目到别的电脑，最好连同project.config.json文件一起拷。

 

实战案例

1、welcome.wxml中

<view class="container"> <!--view组件一般用来当普通容器使用-->
    <image src="/images/bb.png"></image> <!--image组件里面承载着媒体文件-->
    <text class="username">你好，xx</text> <!--text组件里面填写文字，若文字中包含\n，那么就会换行-->
    <view class="moto-container">
        <text class="moto">开启你的xx之路</text>
    </view>
</view>    
<!--image组件插入的图片，默认大小是300px * 250px-->

 

2、新建images文件夹，粘贴bb.png图片

3、小程序的单位最好使用rpx，因为rpx会根据机型大小的变化而变化。px就不会

4、welcome.wxss文件

Page{ /*整个小程序默认被 Page 标签包裹*/
    background: #b3d4db;
}
.container{
    display:flex;
    flex-direction: column;
    align-items: center;
}
image{
    margin-top: 160rpx;
    width:200rpx;
    height:200rpx;
}
.username{
    font-size: 32rpx;
    font-weight: bold;
}
.moto-container{
    margin-top: 200rpx;
    width: 200rpx;
    height: 80rpx;
    border: 1px solid #405f80;
    border-radius: 5px;
    text-align: center;
}
.moto{
    font-size: 22rpx;
    line-height: 80rpx;
    color: #405f80;
    font-weight: bold;
}

 

 5、在app.wxss中加入全局样式

text{
    font-family: MicroSoft yahei;
}

 

6、修改状态栏颜色，在app.json中

{
    "pages": [
        "pages/welcome/welcome"
    ],
    "window":{
        "navigationBarBackgroundColor": "#b3d4db"
    }
}  

 

7、效果展示 

 

 

 

 移动设备的分辨率与rpx

 一般psd设计图宽为750px，而iphone6宽为350px。这是逻辑分辨率与实际分辨率的问题

 

 

 pt为逻辑分辨率，与屏幕物理尺寸有关系，长度单位，能直接看到的

 px为物理分辨率，像素点，和屏幕没有关系，一个pt可以有多个px的像素点

 

rpx单位

 1、小程序里面px单位使用的是逻辑分辨率，所以需要使用rpx单位

 2、使用rpx，小程序会自动在不同的分辨率下进行切换，而使用px不会

 3、不是所有单位都适合用rpx