微信小程序初体验

作者: Iris_mao | 来源:发表于2017-07-21 16:20 被阅读35次
最近倒腾了一下微信小程序,按照微信官方的开发文档一步一步来进行,还是很容易做出一个完整的小程序的,整理记录一下我在做的过程中的一些注意点。

微信官方开发文档网址: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

相关文章

网友评论

    本文标题:微信小程序初体验

    本文链接:https://www.haomeiwen.com/subject/edgskxtx.html