最近倒腾了一下微信小程序,按照微信官方的开发文档一步一步来进行,还是很容易做出一个完整的小程序的,整理记录一下我在做的过程中的一些注意点。
微信官方开发文档网址:https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=1500616227
一、下载微信开发者工具
- 就像开发我也需要sublime一样,开发微信小程序也要有相应的编辑器,就是开发者工具了。只要下载直接安装就行,启动工具时,开发者需要使用微信号扫描二维码登录,后续所有的操作都会基于这个微信帐号。登录之后就可以新建项目进行操作了。
开发者工具.png
二、注册微信小程序
- 可以不用注册,注册和不注册的区别就是注册之后会有一个AppID,做完的小程序可以上传到微信平台在手机上查看;如果不注册不填AppID就可以了,可以在开发工具上进行实时查看,就我测试,效果和真机上的效果是一样的。
- 注册之后可以在后台对小程序进行一些设置,当然这些都是上线之后的一些设置,比如小程序的名称、开启时的头像等等,这里不做详细的介绍。
三、新建一个项目
- 点击新建就可以对小程序进行创建,如果注册了微信小程序,可以获得AppID填写,如果没有注册,选择没有AppID的选项就可以进行开发了,区别就是是否可以上传在手机上预览的区别,其它开发功能基本不受限制。
- 新建项目之后点击确定就进入了开发界面了,有无AppID的区别就是在项目菜单下的上传和预览功能受限。
-
项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。
新建项目.png
无AppID.png
四、开发结构
- 点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。每个文件的作用在开发文档里都有详细的解释:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017621
- 在这个教程里,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。每个文件的作用在开发文档里都有详细的解释:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017621
开发结构.png
五、实践过程中的注意点
-
框架实现的 tabbar,最多5个 tab;通过 wx. navigateTo 推入后台的页面最多5层(即navigator跳转打开的页面不能超过5个),超过会无法打开新页面,即点击新页面没有反应。
tabbar.png - navigator标签相当于a标签的作用,一定要与url搭配使用,如果没有url跳转后台就会报错。
-
navigator跳转的页面一定是没有在tabBar里面定义过的页面,否则无法跳转。所以如果我们页面跳转有和tabBar页面重合的时候,我们就只能自定义tabBar了,写一个foot用fix样式固定在底部就可以了!
navigator.png -
为了不让用户在使用小程序时造成困扰,小程序规定页面路径只能是五层,请尽量避免多层级的交互方式。所以在页面navigator跳转的时候,可以加上redirect属性,即关闭当前页面,跳转到其它页面,可以减少页面的多层嵌套。
redirect.png - 因为小程序上传是有大小限制的,文件夹大小不能超过1M,所以小程序尽量不要用很多图片,如果图片很多可以将图片存放到服务器中,从服务器中调取图片,除去图片的文件大小一般不会超过1M的。还有一个办法就是合理的使用模板。公共的部分可以写成模板,在需要的地方调用即可
<!--定义模板-->
<template name="head">
<view class="head">
<image src="src"></image>
</view>
</template>
<!--调用模板-->
<import src="../common/head.wxml" />
<view>
<template is="head"></template>
</view>
- 微信客服功能
contact-button
,点击按钮可以跳转到微信客服的功能是小程序必不可少的,但是这个功能的logo图标是固定的,如果想换图标要怎么办呢。我采用的方法就是将固定插件设置opacity:0;
,在此基础上进行自己样式的设置,可以多写几个插件将那一块填满。
<view>
<contact-button style="opacity:0;" type="default-light" session-from="weapp" size="100"></contact-button>
<contact-button style="opacity:0;" type="default-light" session-from="weapp" size="100"></contact-button>
<view style="margin-top:-123%;">微信咨询</view>
</view>
.foot .down > view:nth-child(2){
background: url(url) center 35% no-repeat;
background-size: 40%;
}
微信咨询.png
网友评论