【神奇女侠】初学系列教程《一》简介

什么是微信小程序：

小程序是一种新的开放能力，开发人员可以快速开发一个小程序。小程序在微信中很容易获取和传播，体验极佳。

微信小程序官网(微信公众平台):3359mp.weixin.qq.com/Wechat小程序开发文档微信开发者工具下载地址33603359 MP . weixin . QQ . com/debug/wxadoc/dev/devtools/download . html？t=20161122

微信开发者工具的使用

1.安装微信开发者工具后，点击打开。

2.用手机微信扫码登录，

3.选择本地项目：

添加项目

5.添加项目名称并选择存储目录。

girl] 入门系列教程《一》上手简介(图5)" alt="[Wondgirl] 入门系列教程《一》上手简介(图5)" data-bd-imgshare-binded="1" src="http://www.yiyongtong.com/uploads/allimg/180330/1605564119-3.png" />

6.进到主届面,我们可以添加修改删除自己目录或文件.

每个文件更改后都要按command+s保存再进行编译.调试—Console:打印log调试—Sources:源码调试—Network:网络调试—Storage:缓存(本地数据库) 可以点击左边栏的缓存按钮清除缓存.调试—AppData:程序的数据.左边栏后台按钮,模拟小程序在后台运行.

导入已有项目

项目目录选择你要导入的项目即可.项目名称可以写成和要导入项目的名称一样.也可以不一样.

目录结构

编辑—app.jsonpages数组里面是页面的路径,对应的是pages里面的文件夹,一个文件夹是一个页面.每个页面必须包含一个 .js 文件 和一个 .wxml文件..js文件配制页面的入口..wxml文件配制布局与UI.json是页面的配置文件.wxss是页面的样式文件

1. {
2. "pages":[//页面:是个数组(这里对应的两个页面.
3. "pages/index/index",//index页面的路径
4. "pages/logs/logs"//logs页面的路径
5. ],
6. "window":{
7. "backgroundTextStyle":"light",
8. "navigationBarBackgroundColor": "#fff",
9. "navigationBarTitleText": "WeChat",
10. "navigationBarTextStyle":"black"
11. }
12. }

创建一个空的项目

不要勾选下方的复选框.

一.新建App.json文件

二.新建src源码目录. 1.在src目录下新建页面pages目录 2.在pages目录下新建index目录. 3.在index目录下新建页面index.js和index.wxml 三.新建app.js文件

四.我们在页面的布局.wxml文件中输入要显示的内容

五.在页面入口index.js中输入(页面的配制)

1. Page({
2. data:{
4. },
5. onLoad:function(options){
6. // 页面初始化 options为页面跳转所带来的参数
8. },
9. onReady:function(){
10. // 页面渲染完成
12. },
13. onShow:function(){
14. // 页面显示
16. },
17. onHide:function(){
18. // 页面隐藏
20. },
21. onUnload:function(){
22. // 页面关闭
24. }
25. })

在程序入口app.js中输入

1. App({
2. onLaunch: function () {
3. console.log('App Launch')
4. },
5. onShow: function () {
6. console.log('App Show')
7. },
8. onHide: function () {
9. console.log('App Hide')
10. }
11. })

在app.json中输入(程序的配制)

1. {
2. "pages": [
3. "src/pages/index/index"
4. ]
5. }