微信小程序入门到实战(一)

2018-02-03 10:26:07来源:https://juejin.im/post/5a707fd4518825733e60c06c作者:稀土掘金人点击

分享

一个小程序首先有四个应用入口文件:


app.js :设置一些项目的全局变量
app.json :每一个新页面都必须在这个地方注册,项目的导航栏和窗口界面设置有关的
app.wxss :项目全局样式
project.config.json :项目配置文件

一个页面主要是包含以下四个文件,这四个文件的名字应该都是一样的,最好以页面所在的文件夹名字为标准:


xxx.wxml :页面的结构
xxx.wxss :页面的样式
xxx.json :页面的配置文件
xxx.js :页面的脚本文件

页面可以嵌套页面,但是建议不要超过5个层级。


移动设备的分辨率与RPX

小程序推荐使用 rpx 为单位,这样就可以在任意屏幕下面实现自适应


小程序是移动端的开发,所以要注意像素的使用。





pt :视觉单位(长度单位),与设备的屏幕物理尺寸有关系,也叫做逻辑分辨率(逻辑单位),与移动端的栅格渲染有关
px :通常说的像素点,物理分辨率,随着屏幕的变化不会变化;一般设计师给的设计稿是以物理分辨率为单位的,也就是说,iPhone6下的分辨率是375,但是设计图却是750;因为 rpx : px == 1:2,小程序的设计稿就要以iPhone6为参照。

pt 与 px 之间的关系:1个 pt 下面包含多个 px ;也就是说一个逻辑分辨率包含多个物理像素点。 ppI(DPI) :计算的是屏幕显示1个逻辑分辨率包含多个物理像素点,值越大,显示的图像越细腻,清晰。计算的方法是: 320*320+480*480的和开根号再处于屏幕尺寸最后乘以reader值 。 reader值 :视网膜屏,表示一个逻辑像素点包含多个(reader值)物理像素点,一般reader值为2就达到了眼睛的所能观察到细腻的极限,再大几乎不怎么起作用,对于眼睛感觉到的色彩来说。


也就是说,当需要的元素大小适应屏幕尺寸,就选择 rpx 作为单位,否者使用 px 作为单位。


第一个小程序页面
新建一个项目,选择无 AppID ,保存



新建一个页面



我们可以直接在项目的 app.json 中的 pages 属性下面按照此方式创建页面,保存,就可以在左边看到一个以 welcom 名字的文件夹,包含了页面所需要的四个文件,并且里面都已经自动配置好了一些设置,防止出现下面的错误:





解决办法就是在相对应的页面 js 空文件中调用一下 page({...})方法 ,相当于注册一下,注册的时候只需要写页面的名字,不需要区别是那种页面类型。所有的方法都在 page({...}) 方法里面执行


在 app.json 中 pages 这个属性里面的数组元素,谁出现在第一个位置,就是小程序的启动页面。 json 类型的文件里面不能写注释,否者会报文件解析错误。





小程序里面使用 view标签 作为容器,分割文档的作用,类似于在 html 中使用的 div 。


text标签 是一个文本标签,只有当文字被这个标签包裹起来的时候,才能在手机上面长按选中,这个标签支持转义字符的解析。


编写 wxml 代码


<view class='container'>
<image class='user-avatar' src='/images/1.png'></image>
<text class='user-name'>icessun</text>
<view class='moto-container' bindtap='tapName'>
<text class='moto'>开启小程序大门</text>
</view>
</view>

其实在 wxml 中编写页面骨架的时候,注意小程序默认在我们编写的骨架外面包裹了一个 page标签 ,可以通过这个标签来设置整屏的颜色。





在小程序里面呢,一般都使用 flex 布局,弹性盒子模型


display: flex;
flex-direction: column;
align-items: center;

这样第一个小程序页面我们就编写好了,保存运行一下,就可以看到效果,前提是把这个页面设置为启动页,因为我们还没有写页面跳转。





页面周期函数

在上面新建页面的时候,我们发现在 js 文件里面会自动在 page() 方法中生成一些方法,如下:





一般页面启动,会首先调用这三个函数: onLoad(页面加载,一个页面只会调用一次)----->onShow(页面显示,页面每次打开都会调用)----->onReady(页面完成初次渲染)


page() 函数中的 data:{ } 属性,通常是保存页面需要绑定的数据,一般在里面设置一个 变量 ,用来接收从服务器加载来的 JSON 数据,然后在通过数据绑定的方式绑定到页面上面。





最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台