Skip to content

小程序开发指南(一) #6

@gaowei1012

Description

@gaowei1012

1.首先,我们来介绍下在本地搭建一个微信小程序,登录微信官网对应下载与你电脑相对应的开发者工具;
2.再者,进入微信公众号注册一个属于你自己的小程序AppID,关联登录你的微信开发这平台;
3.ok,现在就让我们搭建一个小程序,在打开你的开发者工具后,根据提示输入你的appid和项目名称以及项目保存在本地的路径地址;点击完成, ok至此你的微信小程序框架就算搭建好了;
4.下了我们看这个项目目录,app.js / app.json / app.wxss; js后缀是脚本文件,json是配置文件,wxss是样式文件;
5.首先我们看app.json文件,这是小程序界面的配置,这里一共有五个可以配置的地方;
page,window,tarBar,networkTimeout 和 debug;
(1). page:定义小程序有那些页面组成,(在以后增减页面时都要在这里进行配置),可以看到page是一个数组,第一个是小程序的首页(index), 这里有一个小技巧,在pages下面添加你新建的页面时,你只需要在这里添加好对应页面,然后ctrl+s 就可以生成对应的页面(很方便);
(2). tarBar:配置tarBar的表现(也就是app下面的导航栏)
tarBar最多可以配置五个, 最少可以配置两个;
这里我们对首页和详情页进行配置,具体效果如下:(这里根据自己实际项目要求)
(2). window: 定义窗口配置信息
navigationBarbackgrounColor 导航栏背景色
navigationBarTextStyle 导航栏标题颜色(black,white)
navigationBarTitleText 导航栏标题内容
backgroundColor 窗口颜色
backgroundTextStyle 下拉背景字体, loading图形样式,仅支持dair/light
enablePullDownRefresh 是否开启下拉刷新
(3). networkTimeout: 用来设置各种网络请求的超时时间;(这个在实际开发中一般很少用)
request : wx.request 的超时时间, 单位毫秒
connectSocket : wx.connectSocket 超时时间, 单位毫秒
uploadFile : wx.uploadFile 超时时间 单位毫秒

6.项目结构
在pages下面每一个文件夹都是一个独立的页面, 每个文件夹里面对用会有xxx.js,xxx.json,xxx.wxml,xxx,wxss;(这里就不详细讲每个文件都是干什么的, 和之前在配置文件中的一样作用);
注意: 为了让你这个页面刷新,在json文件里面添加 (enablePullDownRefresh 为 true);
在uitl文件夹下主要是我们定义公用函数;我们在中建立一个app.js文件,用来抽象我们服务器地址;

7.页面生命周期(核心)
app.js
程序的生命周期,在某一特定时候执行某一特定代码

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions