如何制作微信小程序—新建工程与布局分析

边听音乐边阅读吧~~

程序就程序嘛,还“小程序”;电影就电影嘛,还“小电影”!

小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

一、注册账号

进入微信公众平台注册账号

选择注册类型

获取开发者ID

二、安装开发工具

官网下载

工具界面如下

新建一个小程序,ID填获取的开发者ID或测试号

项目名称:项目的名字

目录:项目存放目录

AppID:开发者ID,这里使用测试号

开发模式:选择小程序

后端服务:暂时不会用到,选择不使用云服务

语言:选择JavaScript,或typescript

三、界面分析

模拟器:左侧,实时预览区域

编辑器:右上侧,开发写代码的地方

调试器:右下侧,调试区域

预览:右侧,可以通过微信扫码在手机端真实预览项目

真机调试:右侧,在手机上调试项目

版本管理:直接提供了初始化git仓库等功能,便于多人维护

其他:机型模型,网络模拟等选项

四、文件分析

.wxml:微信模板文件,类似网页开发的html文件。

.wxss:微信样式表文件,用于定于页面样式。

.js:脚本文件,代码逻辑写在这。

.json:静态数据配置文件。

app.json---小程序全局配置文件

包括小程序页面路径,界面表现(标题,背景色,字体色),网络超时时间,底部tab等;

pages字段用于描述小程序所有页面路径,注意,如果你删除了此字段中的某条路径,你得同步删除掉对应的页面文件夹。反之,增加页面也是如此。

windows字段用于定于所有页面的顶部背景颜色,文字颜色,标题等,这是一个全局的配置,修改了所有页面都会生效。当然,我们可以在单个页面json配置中定义独特的风格用于覆盖全局配置,比如让每个页面的头部颜色都不一样。

此文件用于定义开发者工具的个性化定制,比如界面颜色,编译配置等等。

wxml模板

信小程序对前端开发中对页面布局使用的更多是div p span这样的标签进行了封装,虽然不能使用那些熟悉的标签,但微信小程序提供了更为方便的例如view,text等标签。

除了标签变化,wxml还新增了例如wx:if类似的属性,微信小程序也推行了MVVM做法,我们只用关心数据层,当数据发生变化,通过数据绑定的做法,模板中的表达式以及wx:等属性来帮你实现视图变化。

wxss样式

小程序中的样式表写法与网页开发类似,可以看到全局配置中和每个页面文件夹下都存在一个wxss文件,这点与json配置一样。我们可以在app.wxss中定义全局样式,而在页面下的wxss样式中定义此页面独有的页面。

五、部分注意点

1.微信小程序与网页开发的区别

网页开发中我们常常通过mpn引入三方库,但jscore环境与nodejs不太相同,因此在网页开发中npm的包一部分在微信可能无法使用。

2.关于添加页面

pages文件夹下文的页面数量一定得与json中的pages字段数组对应,新增页面推荐做法是直接在pages数组中新增一条页面路径,保存后pages文件夹会自动生成一个新的页面,这样做更加方便和保险。

可以看到新增一条路径,保存后自动新增了文件夹,非常方便。但我们删除pages字段中的某条路径时,文件夹不会自动删除,所以记住手动删除对应文件,保证两者是对应关系。

3.注意json文件写法

1.json文件都是被包裹在{}中,并以key-value方式展示。注意,key一定要加上双引号,没加双引号,或者加了单引号都会报错。

2.其次,json的值只能是数字,字符串(需要加双引号),布尔值,数组(放在[]中),对象(放在{}中),或者null,不支持undefined以及其它数据结构,否则会报错。

3.json文件中无法使用注释,添加任意注释都会引发报错。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200312A0EI2400?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券