zoukankan      html  css  js  c++  java
  • linux下开发微信小程序

     

     

    微信小程序开发流程

     

    1. 有一个邮箱
    2. 用邮箱注册小程序账号并使用该账号获取微信小程序AppID
    3. 用注册的小程序账号登录微信公众平台(https://mp.weixin.qq.com)
    4. 完善小程序信息并且添加开发者(至少一个)
    5. 在微信web开发者工具上开发微信小程序
    6. 微信公众号与微信小程序绑定。
    7. 发布小程序代码
    8. 提交审核

    使用到的开发工具:微信web开发者工具

    一、在Linux环境下安装微信web开发者工具

    步骤:

    先安装 Wine

    sudo apt-get install wine

    查看版本

    wine --version

    版本信息如下:

    wine-3.0.1 (Debian 3.0.1-2)

    安装完记得配置

    winecfg 

    wcc 和 wcsc 编译错误(若没有任何错误信息可跳过)

    执行

    sudo apt-get install wine-binfmt

    sudo update-binfmts --import /usr/share/binfmts/wine

    1.下载开发者工具

    git clone https://github.com/cytle/wechat_web_devtools.git

    2.进入目录

    cd wechat_web_devtools

    3.自动下载最新 nw.js , 同时部署目录 ~/.config/微信web开发者工具/

    ./bin/wxdt install

    运行

    ./bin/wxdt

    4.设置文件夹权限

    sudo chmod -R 777 ~/.config/微信web 开发者工具/

    二、第一个小程序

    1. 打开微信web开发者工具,点击新建项目选择小程序项目,项目目录:选择新建的项目的存储位置,appID:填入申请的appID(若没有,可以使用测试号),最后填入项目名称。点击确定,新项目就创建好了。
    1. 在开始编写之前,先了解一下最基本的东西:

    1) JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。

    2) WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。

    3) WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。

    4) JavaScript是小程序的主要开发语言,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。

    1. 开发步骤:

    1) 首先需要创建全局app所需的三个文件:app.js、app.json、app.wxss。

    只能放在项目的根目录下,如下图:

    ps:app.json文件要配置入口页面(首页),代码如下:

    {

    "pages":["pages/index/index"]

    }

    此处用的是相对路径,如果用绝对路径"/pages/about/about"就会报错。

    特别注意:.json文件里不能写注释,并且不能是个空文件,否则程序会报如下错误:

    2) 创建单页面index所需的文件夹:【通常一个页面的四个文件我们把它们放在一个目录中】

    ps:通常我们用一个目录管理一个页面,而一个小程序往往有多个页面,这时我们就需要把这些页面的目录放在同一个目录中以方便管理。如下图:

    已上图为例:所有页面所需的文件夹都放在pages文件夹下,每个页面有4个文件又统一放在index文件夹下,若有多个页面,则需要创建多个与Index同级的文件夹,里面同样放置着该页面所需的.js、.json、.wxml、.wxss四个文件。

    在第1)点我们说过,.json文件不能是个空文件,所以在此处的index.json文件中虽然没有什么内容要写,但是也不能空着。此处从简考虑,我们创建一个空对象即可,如下图:

    同样,index.js文件也不能空着,否则程序也会报错。此处从简单考虑,我们就注册一个空对象即可:

    3) 待以上工作完毕后,我们就可以编写第一个微信小程序了。

    (输出一个hello world)。

    打开index.wxml文件,添加如下代码:

    text标签用于输出文本

    与html文件同理,我们可以给该标签添加样式

    ① 行内样式:

    ② 类样式:

    Idnex.wxml文件:

    Idnex.wxss文件:

    1. 项目预览

    左侧的手机窗口即可查看到对应的效果

  • 相关阅读:
    服务端增加WCF服务全局异常处理机制
    ASP.NET MVC异常处理方案
    [你必须知道的异步编程]C# 5.0 新特性——Async和Await使异步编程更简单
    Asp.Net Mvc的几个小问题
    C# 多线程之Thread类
    C#泛型
    c#public、private、protected、internal、protected internal
    ASP.NET并发处理
    GDB调试器的使用
    【多媒体封装格式详解】---MKV
  • 原文地址:https://www.cnblogs.com/gaoyuechen/p/13601638.html
Copyright © 2011-2022 走看看