欢迎光临,了解微信小程序开发,就上易用通!

[Wondgirl] 入门系列教程《一》上手简介

发布:2018-03-30 16:05浏览: 来源:网络 作者:cola

什么是微信小程序:

小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

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

微信开发者工具的使用

1.安装好微信开发者工具后,点击打开. 

[Wondgirl] 入门系列教程《一》上手简介(图1)

2.用手机的微信扫一扫扫码登陆. 
这里写图片描述

3.选择本地项目: 

[Wondgirl] 入门系列教程《一》上手简介(图3)

4.添加项目 

[Wondgirl] 入门系列教程《一》上手简介(图4)

5.添写项目名称,选择存放目录 

[Wondgirl] 入门系列教程《一》上手简介(图5)

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

[Wondgirl] 入门系列教程《一》上手简介(图6)

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

导入已有项目

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

[Wondgirl] 入门系列教程《一》上手简介(图7)

目录结构

[Wondgirl] 入门系列教程《一》上手简介(图8)

编辑—app.json 
pages数组里面是页面的路径,对应的是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. }

创建一个空的项目

不要勾选下方的复选框. 

[Wondgirl] 入门系列教程《一》上手简介(图9)

一.新建App.json文件 

[Wondgirl] 入门系列教程《一》上手简介(图10)

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

[Wondgirl] 入门系列教程《一》上手简介(图11)

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

[Wondgirl] 入门系列教程《一》上手简介(图12)

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


  1. Page({
  2. data:{
  3.  
  4. },
  5. onLoad:function(options){
  6. // 页面初始化 options为页面跳转所带来的参数
  7.  
  8. },
  9. onReady:function(){
  10. // 页面渲染完成
  11.  
  12. },
  13. onShow:function(){
  14. // 页面显示
  15.  
  16. },
  17. onHide:function(){
  18. // 页面隐藏
  19.  
  20. },
  21. onUnload:function(){
  22. // 页面关闭
  23.  
  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. }




免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。