美文网首页
微信小程序学习笔记(1)

微信小程序学习笔记(1)

作者: keranalice | 来源:发表于2017-07-14 17:14 被阅读42次

    一、关于AppId:

    明确一点:没有appid虽然不影响开发,但是如果在创建项目的时候没有填写appid则无法进行真机预览。
    appid怎么获得?
    小程序AppID:登录 https://mp.weixin.qq.com 就可以在网站的“开发”-“基本配置”中查看到微信小程序的 AppID 了,不可直接使用服务号或订阅号的 AppID 。

    二、预览小程序:

    无论是copy的代码还是自己手写的程序,如果能在真机上运行看效果的,那简直就是这个feel倍儿爽,下面我就来介绍一下如何在真机预览小程序:
    我们添加好项目之后,打开了开发小程序的界面。看到左边,有一个功能名称叫“项目”,点击打开之后,会看到预览按钮。如果未填写AppID,这个预览功能是灰色的。所以回到上面说过的问题,想要预览一定要填写appid!!!

    预览步骤截图

    三、小程序目录结构介绍:

    最关键也是必不可少的,是 app.js(小程序的脚本代码)、app.json(对整个小程序的全局配置)、app.wxss(整个小程序的公共样式表) 这三个。微信小程序会读取这些文件,并生成小程序实例。

    3.1小程序默认目录结构

    小程序默认目录结构
    3.1.1 小程序的文件格式介绍

    在项目中我们可以看到四种文件类型:

    • .js后缀的文件是脚本文件,页面的交互等代码在这里实现;
    • .json后缀的文件是配置文件,主要是json数据格式存放,用于设置程序 的配置效果;
    • .wxss后缀的是样式表文件,类似于前端中的css,用于对界面进行美化;
    • .wxml后缀的文件是页面结构文件,用于构建页面,在页面上增加控件。

    3.3 pages目录介绍

    pages:主要存放小程序的页面文件,其中每个文件夹为一个页面,每个页面包含四个文件,.wxml文件是界面文件,.js是事件交互文件,用于处理界面的点击事件等功能;.wxss为界面美化文件,让界面显示的更加美观;.json为配置文件,用于修改导航栏显示样式等,小程序每个页面必须有.wxml和.js文件,其他两种类型的文件可以不需要。
    注意:文件名称必须与页面的文件夹名称相同,如index文件夹,文件只能是index.wxml、index.wxss、index.js和index.json.

    3.4 utils

    该文件件主要用于存放全局的一些.js文件,公共用到的一些事件处理代码文件可以放到该文件夹下,用于全局调用。

    module.exports = {  
      formatTime: formatTime  
    } 
    

    对于允许外部调用的方法,用module.exports进行声明,才能在其他js文件中用以下代码引入

    var util = require('../../utils/util.js')  
    

    然后就可以调用该方法。

    3.5 app.js、app.json、app.wxss

    app.js : 系统的方法处理文件,主要处理程序的声明周期的一些方法;例如:程序刚开始运行时事件处理等
    app.json : 系统全局配置文件,设置导航头的颜色,字体大小,下面有没有tabbar等功能,具体页面的配置在页面的json文件中单独修改;
    app.wxss : 全局的界面美化代码

    相关文章

      网友评论

          本文标题:微信小程序学习笔记(1)

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