Вход апплета Wechat в реальный бой (1)

внешний интерфейс Апплет WeChat

Узнайте о мини-программах

  • Что такое апплет? Апплет — это фактически инструмент, предоставляющий людям удобные услуги, его можно использовать в любое время, а можно использовать, как только он израсходуется, уменьшая количество приложений на рабочем столе;

B2C (люди и товары) Taobao JD P2P (от человека к человеку) WeChat QQ C2P (люди и услуги) Апплет WeChat Апплет Alipay

  • Какие приложения подходят для мини-программ? Для некоторых приложений с низкими требованиями к производительности, низкой частотой использования и простой бизнес-логикой подходит создание небольшого программного приложения, такого как покупка билетов, оплата, пополнение мобильного телефона и т. д.

Файловая структура апплета

Сначала апплет имеет четыре файла входа в приложение:

  • app.js: установить некоторые глобальные переменные проекта
  • app.json: Каждая новая страница должна быть прописана в этом месте, навигационная панель проекта и настройки оконного интерфейса связаны
  • app.wxss: Глобальный стиль проекта
  • project.config.json: файл конфигурации проекта

Страница в основном содержит следующие четыре файла. Имена этих четырех файлов должны быть одинаковыми. Лучше всего использовать стандартное имя папки, в которой находится страница:

  • xxx.wxml: Структура страницы
  • xxx.wxss: стиль страницы
  • xxx.json: файл конфигурации для страницы
  • xxx.js: файл сценария страницы

Страницы могут быть вложенными, но рекомендуется не превышать 5 уровней.

Разрешения мобильных устройств и RPX

Мини-программа Рекомендуемая к использованиюrpxблок, чтобы он мог быть адаптивным под любой экран

Апплет разработан для мобильных устройств, поэтому обратите внимание на использование пикселей.

移动设备分辨率

  • pt: визуальная единица (единица длины), связанная с физическим размером экрана устройства, также называемая логическим разрешением (логическая единица), связанная с отображением сетки на мобильной стороне.
  • px: Вообще говоря, точка пикселя, физическое разрешение, не изменится с изменением экрана; проект дизайна, данный генеральным дизайнером, основан на физическом разрешении, то есть разрешение под iPhone6 375, но по конструкции цифра 750; т.к.rpx:px== 2:1, дизайн-проект апплета должен быть основан на iPhone 6.

ptа такжеpxСвязь между: 1ptДалее содержится несколькоpx, то есть логическое разрешение содержит несколько физических пикселей.ppI(DPI): Расчет состоит в том, что одно логическое разрешение экрана содержит несколько физических пикселей, чем больше значение, тем деликатнее и четче будет отображаемое изображение. Метод расчета:320*320+480*480的和开根号再处于屏幕尺寸最后乘以reader值.reader值: Экран Retina, указывающий, что логический пиксель содержит несколько (значение для чтения) физических пикселей. Как правило, значение для чтения равно 2, что достигает предела четкости цвета, который можно наблюдать глазами.

То есть, когда требуемый размер элемента соответствует размеру экрана, выберитеrpxкак единое целое, иначе используйтеpxкак единица.

Первая страница апплета

  • Создайте новый проект, выберите «Нет».AppID,спасти
    新建项目
  • создать новую страницу
    新建页面

Можем прямо в проектеapp.jsonсерединаpagesСоздайте страницу таким образом в свойствах, сохраните ее, и вы увидите страницу слева, которая начинается сwelcomИмя папки содержит четыре файла, необходимых для страницы, без руководстваapp.jsОн прописан внутри, и в нем автоматически настроены некоторые параметры для предотвращения следующих ошибок:

页面js文件未调用page()方法

Решение - перейти на соответствующую страницуjsВызов из пустого файлаpage({...})方法, что эквивалентно регистрации.При регистрации нужно только написать название страницы, и не нужно различать тип страницы. Все методы этой страницы находятся вpage({...})выполнить в методе

существуетapp.jsonсерединаpagesЭлемент массива в этом атрибуте, который появляется в первой позиции, является стартовой страницей апплета.jsonВ файлах этого типа нельзя писать комментарии, иначе будет сообщено об ошибке разбора файла.

json文件注释报错

Используется в апплетеview标签В качестве контейнера роль разделения документов аналогична роли вhtmlиспользуется вdiv.

text标签Это текстовая метка. Только когда текст заключен в эту метку, ее можно выбрать долгим нажатием на телефоне. Эта метка поддерживает разбор escape-символов.

записыватьwxmlкод

<view class='container'>
  <image class='user-avatar' src='/images/1.png'></image>
  <text class='user-name'>icessun</text>
  <view class='moto-container' bindtap='tapName'>
    <text class='moto'>开启小程序大门</text>
  </view>
</view>

по фактуwxmlПри написании скелета страницы в формате , обратите внимание, что апплетpage标签, вы можете использовать этот тег, чтобы установить цвет всего экрана.

最外层page标签

В апплете обычно используетсяflexмакет, модель flexbox

  display: flex;
  flex-direction: column;
  align-items: center;

Таким образом, мы написали первую страницу апплета, сохранили и запустили ее, и вы можете увидеть эффект.Предпосылка состоит в том, что эта страница установлена ​​​​как начальная страница, потому что мы еще не написали переход на страницу.

第一个小程序页面效果

функция цикла страницы

При создании новой страницы выше мы обнаружили, что вjsфайл будет автоматическиpage()Некоторые методы генерируются в методе следующим образом:

页面周期函数

Как правило, при запуске страницы первыми вызываются эти три функции:onLoad(页面加载，一个页面只会调用一次)----->onShow(页面显示，页面每次打开都会调用)----->onReady(页面完成初次渲染)

page()в функцииdata:{ }Атрибут, как правило, чтобы сохранить данные, которые на странице необходимо связать, обычно устанавливаютПеременная, используется для получения нагрузок с сервераJSONЗатем данные привязываются к странице посредством привязки данных.

page周期函数图

app.jsжизненный цикл

app.jsРечь идет о методах и свойствах всего проекта апплета, похожего на страницуPage({...})функция, также требуется внешняя оболочка функцииApp({ ...})

App({
  //当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  onLaunch: function () {

  },
  // 当小程序启动，或从后台进入前台显示，会触发 onShow
  onShow: function (options) {

  },
  //当小程序从前台进入后台，会触发 onHide
  onHide: function () {

  },
  // 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  onError: function (msg) {

  }
})
 // 应用程序的全局变量
  globalData: {
    g_isPlaying: false,
    //  记录当前页面是否播放
    g_currentMusicPost: null,
    //  电影api地址
    doubanBase: 'https://api.douban.com'
  }

Конечно, вы также можете установить некоторые глобальные переменные в нем, а затем соответствующие другим страницамjsГлобальные переменные, определенные в файле, получаются следующим образом.

var app = getApp();  
var globalData = app.globalData
Категории