济南小程序开发公司小猫科技:专注微信开发,济南小程序开发,济南微信小程序定制开发等业务!
手机版手机网站二维码 微信版 微信二维码 业务咨询电话:159-5318-4521

前端系列——微信小程序开发

发表于:19-09-12 22:53 阅读()

1、微信小程序的注册和微信开发者工具的下载

在微信公众平台注册小程序账号,注册时注意小程序和公众号不能使用同一个帐号,登录小程序时,公众号会自动下线。一般账号为邮箱号,所以提前准备俩邮箱号,方便注册。注册号一号进入如下界面:

前端系列——微信小程序开发

可以完善小程序信息,以及实名认证等,这些都是傻瓜式的操作,懂汉语就行,不知道在哪里就多试试,试试又不怀孕!

然后下载你开发的工具:

前端系列——微信小程序开发

下载完成后安装即可。

2、创建项目

进入开发工具界面,新建开发项目:

前端系列——微信小程序开发

这里会自动生成一些文件夹,下面是文件夹的具体说明:

pages:存放项目页面文件,一般一个目录对应一个页面。

utils:存放工具函数(一般是自己封装)。

app.js:全局的逻辑处理

app.json:(1)页面文件路径设置

(2)窗口外观设置

(3)设置/添加tabbar(底部/顶部导航)

app.wxss:全局样式

project.config.json:项目配置文件

sitemap.json:小程序内搜索,开发者可以通过 `sitemap.json` 配置,或者管理后台页面收录开关来配置其小程 序页面是否允许微信索引

前端系列——微信小程序开发

小程序中.wxml对应的是html文件,.wxss对应的是css文件。

文件夹中文件组成:

home.js:逻辑处理

home.json:静态数据

home.wxml:页面结构

home.wxss:页面布局

3、利用tabBar设置小程序的菜单导航

上面写到设置、添加tabBar在app.json文件中,所以在此文件中设置需要的菜单导航,以及引入需要的图标。这里可以将整个项目中用到的小图标在阿里图标库中进行添加,跟vue项目中一样,然后下载到本地,将对应的文件复制到项目文件中即可。

前端系列——微信小程序开发

这里一般设置三个导航项,iconPath为默认未点击时显示的图标路径,selectedIconPath为选择点击后的图片路径。效果如下图:

前端系列——微信小程序开发

如果想让导航位置位于整个页面的上方,可以将tabBar中的position属性设置为top即可。

前端系列——微信小程序开发

这里拷贝一下微信官方文档内容,供大家参考:

前端系列——微信小程序开发
前端系列——微信小程序开发
前端系列——微信小程序开发

4、全局设置

前端系列——微信小程序开发

backgroundTextStyle string dark——下拉 loading 的样式,仅支持 dark / light

avigationBarBackgroundColor HexColor #000000——导航栏背景颜色,如 #000000

navigationBarTitleTextstring——导航栏标题文字内容

navigationBarTextStylestringwhite——导航栏标题颜色,仅支持 black / white

复制快捷键:

向下:Alt+Shift+向下光标键

向上:Alt+Shift+向上光标键

5、应用头部布局

由于空间较小等,我们可能在“开发者工具”中开发不太习惯,这时我们可以在其他软件中进行开发,如webstorm中,只需要安装WeChat weapp Support插件。

如需要微信小程序中默认的小图标:

前端系列——微信小程序开发

用如下icon标签引入即可(这里引入了搜素图标):

前端系列——微信小程序开发

6、数据请求和页面跳转

在基本布局和样式完成后,就是请求数据和渲染界面。

请求后台api接口数据一般封装一个工具函数,因为有很多页面要请求数据。工具函数的封装大概如下:

前端系列——微信小程序开发

然后就是在页面引入使用它:

前端系列——微信小程序开发

接下来就是如下所示的一些数据渲染:

前端系列——微信小程序开发

在一些页面中要实现页面间的跳转,微信小程序中用bindtap,相当于绑定一个点击事件,然后在对应的js文件中写入需要跳转的页面路径:

前端系列——微信小程序开发
前端系列——微信小程序开发
济南小程序开发公司小猫科技



top