首先安装微信开发者工具,如果打开是白色屏幕,可能就是你的安装路径有汉语,把安装路径改成全英文的就可以了。

学习微信小程序开发(从零学习微信小程序开发)(1)

App注册入口

学习微信小程序开发(从零学习微信小程序开发)(2)

学习微信小程序开发(从零学习微信小程序开发)(3)

学习微信小程序开发(从零学习微信小程序开发)(4)

App.js中的App用来注册整个小程序应用,app.json用来对小程序进行全局配置,其中Pages是页面路径列表,window是全局的默认窗口表现,#fff指的是手机最上面的导航窗口是白色。App.wxss是放置公共样式的文件,其中index和logs下面也有自己的样式文件。

Pages下面的index.js 是行为index.json是配置 index.wxml是结构(里面的view标签相当于html中的div), index.wxss是样式。

Pages/index/index代表pages这一层找index下面所有的index文件。

下面是一个静态案例代码展示:

新建一个JavaScript项目,把多余的文件都删掉,只留下project.config.json和sitemap.json,

首先新建app.js,进行App注册,新建pages目录,再在pages下面新建index目录,index下面的四个文件index.js,index.json,index.wxml,index.wxss就可以同时创建出来。

在index.wxml里面写上下面的代码,可以展现基本的结构,如下图所示,但是没有一点样式。

学习微信小程序开发(从零学习微信小程序开发)(5)

基本显示结构

学习微信小程序开发(从零学习微信小程序开发)(6)

没有添加样式的静态程序显示

微信开发里面用class表示样式,分别给图片,用户名和跳转登录标签定义一个样式,放在index.wxss里面。

<view class="indexContainer"> <image class="avatarUrl" src="/static/images/nvsheng.jpg"></image> <text class="userName">凌风</text> <view class="goStudy"> <text>hello world</text> </view> </view>

学习微信小程序开发(从零学习微信小程序开发)(7)

index.wxss文件

学习微信小程序开发(从零学习微信小程序开发)(8)

添加样式后的小程序显示

,